/* ==== tokens.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   DESIGN TOKENS & THEME VARIABLES
   Auto-extracted from styles.css — edit this file for page-specific styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ──────────────────────────────────────────────────────────── */
:root {
    /* Dark theme — base defaults */
    /* --bg-base disamakan dengan --bg-page agar SEMUA halaman punya latar yang
       sama seperti /lives (canvas explore/home/messages & ring avatar ikut). */
    /* Charcoal HANGAT (bukan near-black kebiruan) → buang kesan "OLED crypto".
       Skala surface konsisten dari page → elevated. */
    --bg-base: #16151d;
    --bg-page: #16151d;
    --bg-surface: #1a1922;
    --bg-card: #201f29;
    --bg-card-hover: #272631;
    --bg-elevated: #2c2b37;
    --bg-elevated-2: #3a3848;

    --text-primary: #f0f0f8;
    --text-secondary: #8888aa;
    --text-muted: #55556a;
    --text-soft-accent: #c8d8ff;
    --text-on-accent: #100f16;

    /* Lime DIJINAKKAN: dulu neon chartreuse → kini lime lembut #a6d96a. Tetap
       identitas brand, tapi tak lagi "trading terminal". live-green → mint. */
    --accent-lime: #a6d96a;
    --accent-blue: #4f6bff;
    --accent-violet: #7c4fff;
    --accent-info: #7da7ff;
    --accent-pink: #ff6b9d;
    --accent-promo: #b78cff;
    --live-green: #4bd88f;
    --warning-amber: #ffad2b;
    --danger: #ff4f6b;

    --border-soft: rgba(255, 255, 255, 0.06);
    --border: rgba(255, 255, 255, 0.07);
    --border-strong: rgba(255, 255, 255, 0.1);

    --overlay-blur: rgba(22, 21, 29, 0.97);
    --overlay-blur-soft: rgba(22, 21, 29, 0.75);
    --notch-bg: #16151d;
    --map-bg-1: #201f29;
    --map-bg-2: #16151d;
    --map-grid: rgba(79, 107, 255, 0.08);

    --scrollbar-track: #100f16;
    --scrollbar-thumb: #2c2b37;

    /* Adaptive primary CTA — lime in dark, blue in light */
    --color-primary: var(--accent-lime);
    --color-primary-text: var(--text-on-accent);
    /* Glow diperlembut (alpha & lebar turun) → tak lagi neon menyala. */
    --color-primary-glow: rgba(166, 217, 106, 0.28);
    --color-primary-soft: rgba(166, 217, 106, 0.08);
    --color-primary-border: rgba(166, 217, 106, 0.3);

    --bdot-inactive: rgba(255, 255, 255, 0.2);
    --chip-active-bg: #ffffff;
    --chip-active-text: #100f16;
    --tab-active-bg: #ffffff;
    --tab-active-text: #100f16;
    --social-btn-border-hover: rgba(255, 255, 255, 0.15);

    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.45);
    --shadow-glow: 0 0 18px rgba(166, 217, 106, 0.22);

    --font-display: "Bebas Neue", sans-serif;
    --font-body: "Space Mono", monospace;

    /* ── Z-Index Layer System ──────────────────────────────────────── */
    --z-base: 1;
    --z-sticky: 10;
    --z-overlay: 20;
    --z-header: 40;
    --z-nav: 50; /* bottom-nav */
    --z-footer: 80; /* sticky footers (cart, pay, sticky) */
    --z-nav-top: 100; /* top-level nav always on top */
    --z-modal-backdrop: 200;
    --z-toast: 300;
    --z-search-overlay: 300;
    --z-story: 900;
    --z-story-ui: 901;
}

.home-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-primary);
    text-decoration: none;
    transition:
        background 0.2s,
        color 0.2s;
}
.home-link:hover {
    background: var(--bg-card-hover);
    color: var(--accent-lime);
}

/* Auth header — disamakan styling dengan tombol navigasi lainnya */
.auth-header .home-link {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}
[data-theme="light"] .auth-header .home-link {
    background: var(--bg-card);
    border-color: var(--border);
    color: var(--text-primary);
}

/* Header logo */
.kinetic-logo {
    font-family: "Bebas Neue", sans-serif;
    font-size: 28px;
    letter-spacing: 3px;
    color: var(--text-primary);
}

/* Pastikan logo tetap kontras di mode terang */
[data-theme="light"] .kinetic-logo {
    color: var(--text-primary); /* warna otomatis menyesuaikan tema */
}

/* ── LIGHT THEME OVERRIDES ──────────────────────────────────────────────────── */
[data-theme="light"] {
    /* Samakan dengan --bg-page (lihat catatan di :root). */
    --bg-base: #f3f3fb;
    --bg-page: #f3f3fb;
    --bg-surface: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #ebebf5;
    --bg-elevated: #e2e2f0;
    --bg-elevated-2: #cccce6;

    --text-primary: #0c0c1a;
    --text-secondary: #48486a;
    --text-muted: #70709a;
    --text-soft-accent: #1a2a82;
    --text-on-accent: #ffffff;

    --accent-lime: #3d6600;
    --accent-blue: #2d4ee0;
    --accent-violet: #5522c8;
    --accent-info: #3a6fd4;
    --accent-pink: #c42a6a;
    --accent-promo: #7233c0;
    --live-green: #0a7035;
    --warning-amber: #875000;
    --danger: #bc1830;

    --border-soft: rgba(0, 0, 20, 0.06);
    --border: rgba(0, 0, 20, 0.09);
    --border-strong: rgba(0, 0, 20, 0.14);

    --overlay-blur: rgba(243, 243, 251, 0.96);
    --overlay-blur-soft: rgba(255, 255, 255, 0.88);
    --notch-bg: #f3f3fb;
    --map-bg-1: #e0e4f8;
    --map-bg-2: #f3f3fb;
    --map-grid: rgba(45, 78, 224, 0.12);

    --scrollbar-track: #e2e2f0;
    --scrollbar-thumb: #bebede;

    --color-primary: var(--accent-blue);
    --color-primary-text: #ffffff;
    --color-primary-glow: rgba(45, 78, 224, 0.3);
    --color-primary-soft: rgba(45, 78, 224, 0.07);
    --color-primary-border: rgba(45, 78, 224, 0.3);

    --bdot-inactive: rgba(0, 0, 30, 0.18);
    --chip-active-bg: #0c0c1a;
    --chip-active-text: #ffffff;
    --tab-active-bg: #0c0c1a;
    --tab-active-text: #ffffff;
    --social-btn-border-hover: rgba(0, 0, 20, 0.2);

    --shadow-card: 0 10px 24px rgba(0, 0, 20, 0.08);
    --shadow-glow: 0 0 24px rgba(61, 102, 0, 0.2);
}

/* ── Light mode — redupkan overlay/gradient dari tema gelap ──────── */
[data-theme="light"] .hero-overlay {
    background: linear-gradient(
        to top,
        rgba(12, 12, 26, 0.78) 0%,
        rgba(12, 12, 26, 0.18) 60%,
        transparent 100%
    );
}
[data-theme="light"] .upgrade-banner {
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-violet) 100%);
}
[data-theme="light"] .upgrade-btn {
    background: #ffffff;
    color: var(--accent-blue);
}
[data-theme="light"] .nav-avatar {
    border-color: rgba(45, 78, 224, 0.45);
    background: var(--bg-card);
}
[data-theme="light"] .bell-dot {
    background: var(--accent-blue);
    box-shadow: 0 0 8px rgba(45, 78, 224, 0.45);
    border-color: var(--bg-page);
}
[data-theme="light"] .count-dot {
    background: var(--accent-blue);
}
[data-theme="light"] .scarcity-dot {
    background: var(--accent-blue);
}
[data-theme="light"] .pulse-dot--green {
    background: var(--accent-blue);
    box-shadow: 0 0 8px rgba(45, 78, 224, 0.45);
}
[data-theme="light"] .avatar-circle {
    border-color: var(--accent-blue);
    box-shadow:
        0 0 0 4px rgba(45, 78, 224, 0.1),
        0 0 40px rgba(45, 78, 224, 0.14);
}
[data-theme="light"] .avatar-edit {
    background: var(--accent-blue);
    color: #fff;
}
[data-theme="light"] .profile-glow {
    background: radial-gradient(circle, rgba(45, 78, 224, 0.1) 0%, transparent 70%);
}
[data-theme="light"] .header-badge {
    color: var(--accent-blue);
    background: rgba(45, 78, 224, 0.1);
    border-color: rgba(45, 78, 224, 0.25);
}
[data-theme="light"] .auth-prompt-link {
    color: var(--accent-blue);
}
[data-theme="light"] .forgot-link:hover {
    color: var(--accent-blue);
}
[data-theme="light"] .stat-value {
    color: var(--accent-blue);
}
[data-theme="light"] .grid-bg {
    background: var(--bg-page);
}
[data-theme="light"] .orb-2 {
    background: radial-gradient(circle, rgba(45, 78, 224, 0.45) 0%, transparent 70%);
}
[data-theme="light"] .vip-icon-wrap {
    color: #fff;
}
[data-theme="light"] .qr-box {
    background: #fff;
    border: 1px solid var(--border);
}
[data-theme="light"] .td-qr {
    background: #fff;
    box-shadow: 0 0 40px rgba(45, 78, 224, 0.18);
}
[data-theme="light"] .vl-pin-circle {
    border-color: var(--accent-blue);
    box-shadow: 0 0 30px rgba(45, 78, 224, 0.3);
}
[data-theme="light"] .vl-pin-dot {
    background: var(--accent-blue);
}
[data-theme="light"] .vl-pin-pulse {
    background: rgba(45, 78, 224, 0.18);
}
[data-theme="light"] .vl-pin-label {
    color: var(--accent-blue);
    border-color: rgba(45, 78, 224, 0.35);
}
[data-theme="light"] .vl-section-line {
    background: var(--accent-blue);
}
[data-theme="light"] .vl-distance {
    background: rgba(45, 78, 224, 0.08);
    border-color: rgba(45, 78, 224, 0.22);
}
[data-theme="light"] .bottom-item--active {
    color: var(--accent-blue);
}
[data-theme="light"] .view-all,
[data-theme="light"] .results-clear,
[data-theme="light"] .past-cta-btn,
[data-theme="light"] .vl-view-all,
[data-theme="light"] .section-badge,
[data-theme="light"] .nd-eyebrow,
[data-theme="light"] .vl-eyebrow,
[data-theme="light"] .event-badge,
[data-theme="light"] .live-badge,
[data-theme="light"] .notif-cta,
[data-theme="light"] .order-cta--view,
[data-theme="light"] .td-qr-ref {
    color: var(--accent-blue);
}
[data-theme="light"] .notif-cta {
    border-color: var(--accent-blue);
}
[data-theme="light"] .notif-cta:hover {
    background: rgba(45, 78, 224, 0.08);
}
[data-theme="light"] .order-cta--view {
    border-color: rgba(45, 78, 224, 0.35);
}
[data-theme="light"] .hero-price,
[data-theme="light"] .trending-price,
[data-theme="light"] .item-price,
[data-theme="light"] .ticket-price,
[data-theme="light"] .event-card-price,
[data-theme="light"] .order-price,
[data-theme="light"] .order-compact-price,
[data-theme="light"] .vl-event-price,
[data-theme="light"] .nd-total {
    color: var(--accent-blue);
    font-weight: 700;
}
[data-theme="light"] .total-final-amt,
[data-theme="light"] .starting-price {
    color: var(--accent-blue);
}
[data-theme="light"] .notif-amount,
[data-theme="light"] .notif-highlight,
[data-theme="light"] .nd-info-banner strong,
[data-theme="light"] .nd-subtitle strong {
    color: var(--accent-blue);
}
[data-theme="light"] .auth-prompt-link,
[data-theme="light"] .forgot-link {
    color: var(--accent-blue);
}
[data-theme="light"] .method-card--active {
    border-color: var(--color-primary-border);
    background: var(--color-primary-soft);
}
[data-theme="light"] .method-check {
    background: var(--color-primary);
    color: var(--color-primary-text);
}
[data-theme="light"] .nd-pay-icon,
[data-theme="light"] .vl-addr-icon,
[data-theme="light"] .nd-info-banner,
[data-theme="light"] .nd-info-icon,
[data-theme="light"] .flash-icon-wrap {
    background: rgba(45, 78, 224, 0.1);
    border-color: rgba(45, 78, 224, 0.2);
}
[data-theme="light"] .nd-info-banner p {
    color: var(--text-secondary);
}
[data-theme="light"] .nd-check-ring {
    background: conic-gradient(
        var(--accent-blue) 0deg,
        var(--accent-violet) 180deg,
        var(--accent-blue) 360deg
    );
    box-shadow: 0 0 50px rgba(45, 78, 224, 0.25);
}
[data-theme="light"] .nd-check-circle {
    background: var(--accent-blue);
    color: #fff;
}
[data-theme="light"] .success-card {
    border-color: rgba(45, 78, 224, 0.25);
}
[data-theme="light"] .success-icon {
    background: rgba(45, 78, 224, 0.08);
    border-color: rgba(45, 78, 224, 0.2);
    color: var(--accent-blue);
}
[data-theme="light"] .pay-bar-btn,
[data-theme="light"] .nd-cta-btn,
[data-theme="light"] .vl-directions-btn,
[data-theme="light"] .td-btn--primary {
    background: var(--accent-blue);
    color: #fff;
}
[data-theme="light"] .order-pill--upcoming {
    background: var(--accent-blue);
    color: #fff;
}
[data-theme="light"] .notif-pill--live {
    background: var(--accent-blue);
    color: #fff;
}
[data-theme="light"] .pulse-dot {
    background: #fff;
}
[data-theme="light"] .live-badge-card {
    background: var(--accent-blue);
    color: #fff;
}
[data-theme="light"] .slide-badge--live {
    background: var(--accent-blue);
    color: #fff;
}
[data-theme="light"] .banner-price {
    color: #a6d96a;
} /* keep original on dark image overlay */
[data-theme="light"] .footer-meta-desc,
[data-theme="light"] .order-meta-row {
    color: var(--text-secondary);
}

/* ── SMOOTH THEME TRANSITION ──────────────────────────────────────────────── */
html,
body,
.page,
.auth-page,
.bottom-nav,
.cart-footer,
.pay-bar,
.sticky-footer,
.search-bar,
.search-wrap,
.field-box,
.ticket-card,
.order-card,
.menu-item,
.notif-card,
.nd-card,
.nd-venue-card,
.vl-info-card,
.vl-facility,
.event-card,
.trending-card,
.auth-card,
.summary-card,
.order-item,
.method-card,
.promo-wrap,
.map-card,
.tier-card,
.stat-card,
.flash-card,
.cd-block,
.iq-btn,
.qty-btn,
.td-stub,
.td-pill,
.td-info-card,
.nav-avatar,
.back-btn,
.bell-btn,
.icon-btn,
.chip,
.filter-tab,
.reset-btn,
.submit-btn,
.grab-btn,
.proceed-btn,
.access-btn,
.confirm-btn,
.pay-bar-btn,
.nd-cta-btn,
.vl-directions-btn,
.browse-btn,
.book-btn,
.upgrade-btn,
.promo-apply-btn,
.orders-search,
.order-card-compact,
.vl-event-card,
.menu-section-label,
.page-logo {
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

/* ==== base.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   BASE RESET, ANIMATIONS & LAYOUT
   Auto-extracted from styles.css — edit this file for page-specific styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ── BASE RESET ────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
}
body {
    background-color: var(--bg-page);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100dvh;
    overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5 {
    font-family: var(--font-display);
    letter-spacing: 0.02em;
    line-height: 1.1;
}
::-webkit-scrollbar {
    width: 4px;
}
::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

/* ── ANIMATIONS ─────────────────────────────────────────────────────────────── */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
@keyframes pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}
@keyframes orbFloat {
    0%,
    100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(30px, 20px);
    }
}
@keyframes pulse-ring {
    0% {
        transform: translateX(-50%) scale(0.8);
        opacity: 0.8;
    }
    100% {
        transform: translateX(-50%) scale(1.6);
        opacity: 0;
    }
}

.animate-fade-up {
    animation: fadeUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.animate-fade-up-delay-1 {
    animation-delay: 0.1s;
}
.animate-fade-up-delay-2 {
    animation-delay: 0.2s;
}
.animate-fade-up-delay-3 {
    animation-delay: 0.35s;
}

/* ── SHARED CHROME ──────────────────────────────────────────────────────────── */
.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 4px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}
.nav-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 2px solid rgba(79, 107, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    text-decoration: none;
    overflow: hidden;
    flex-shrink: 0;
}
.nav-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    background: var(--overlay-blur);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--border-strong);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    padding: 8px 0 20px;
    z-index: 100;
}
.bottom-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    padding: 6px 0;
    color: var(--text-muted);
    transition: color 0.2s;
}
.bottom-item--active {
    color: var(--accent-lime);
}
.bottom-label {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.06em;
}

/* ══════════════════════════════════════════════════════════════════════════════
   KONSISTENSI UKURAN — semua halaman gunakan base .page (480px, padding-bottom 100px)
   Override per-halaman hanya jika benar-benar diperlukan
   ══════════════════════════════════════════════════════════════════════════════ */

/* Cart punya fixed footer lebih tinggi — beri ruang lebih */
.cart-page {
    padding-bottom: 160px;
}

/* Profile & detail acara perlu penanganan overflow */
.profile-page {
    position: relative;
    width: 100%;
}

/* ── 5. overflow-x containment without breaking fixed children ───────────── */
/* .page must NOT have overflow-x: hidden (breaks position:fixed).
   Containment is on body instead (already set above).
   Guard negative-margin scroll tracks explicitly: */
.home-genre-grid,
.lineup-grid,
.chip-row,
.exp-chips {
    /* These use negative margins or padding tricks for edge-to-edge scroll.
     clip-path on parent is safer than overflow:hidden for fixed children. */
    overflow-x: auto;
    scrollbar-width: none;
}
.home-genre-grid::-webkit-scrollbar,
.lineup-grid::-webkit-scrollbar {
    display: none;
}

/* ── 6. Bottom-nav on-screen guarantee ──────────────────────────────────── */
/* Force bottom-nav to always be within the safe viewport area */
.bottom-nav {
    /* Pad for iOS home indicator */
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    /* Ensure it's never obscured by transforms on parent */
    will-change: unset;
    transform: translateX(-50%); /* re-assert, no translateY */
}

/* Ensure <main> always takes full viewport width — prevents shimmer width collapse */
main {
    display: block;
    width: 100%;
    min-height: 100dvh;
}

/* Page bottom padding accounts for nav + safe area */
.page {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 12px));
}

/* Generic content container — same 480px width as .page */
.container {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}
/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE TAP HIGHLIGHT FIX — Hapus kotak biru/highlight saat touch di mobile
   Berlaku untuk semua elemen interaktif
   ══════════════════════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; /* Cegah callout (copy/paste popup) saat long-press link */
}

/* Pastikan focus tetap terlihat untuk aksesibilitas keyboard (bukan touch) */
:focus-visible {
    outline: 2px solid var(--accent-lime, #a6d96a);
    outline-offset: 2px;
}

/* Hapus outline default yang muncul dari rule sebelumnya saat tap touch */
:focus:not(:focus-visible) {
    outline: none;
}

/* Semua elemen yang bisa diklik */
a,
button,
input,
select,
textarea,
label,
[role="button"],
[tabindex],
.chip,
.filter-tab,
.bottom-item,
.menu-item,
.notif-card,
.ticket-card--link,
.trending-card,
.event-card,
.upcoming-card,
.rec-card,
.vl-event-card,
.order-card,
.order-card-compact,
.explore-event-card-v2,
.exp-card-wrap,
.msg-convo-row,
.msg-hot-card,
.mhub-nav-item,
.mhub-event-card,
.story-add-btn,
.story-user-btn,
.sc-tombol-bulat,
.sc-tombol-alat,
.sc-tombol-stiker,
.sc-item-musik,
.sc-item-filter,
.drg-overlay,
.home-genre-card,
.ed-accordion-item,
.ed-cat-card-full,
.banner-slide-inner,
.exp-banner-link,
.back-btn,
.bell-btn,
.icon-btn,
.theme-toggle,
.home-link,
.nav-avatar {
    -webkit-tap-highlight-color: transparent;
}

/* User-select: none untuk elemen UI yang tidak perlu dipilih teks */
button,
.chip,
.filter-tab,
.bottom-item,
.bottom-label,
.section-title,
.page-logo,
.kinetic-logo,
[role="button"] {
    user-select: none;
    -webkit-user-select: none;
}



/* Audio Pill — Instagram Glass */
.ap-root {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.04em;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background 0.15s;
    
    /* 🔴 FIX: fixed width untuk semua state */
    width: 140px;           /* fixed width */
    justify-content: center; /* center content */
    box-sizing: border-box;
}

.ap-root:active { transform: scale(0.92); }
.ap-root:hover  { background: rgba(0,0,0,0.45); }
.ap-root:hover {
    background: rgba(0, 0, 0, 0.65);
}

.ap-icon-wrap {
    position: relative;
    width: 18px; height: 18px;
    display: grid; place-items: center;
}
.ap-speaker, .ap-slash { grid-area: 1/1; }

/* Wave Bars — pure CSS, no JS/WASM alloc */
.ap-waves {
    position: absolute;
    right: -10px; top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 2px;
    height: 14px;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.ap-waves--active { opacity: 1; }
.ap-bar {
    width: 2.5px;
    border-radius: 2px;
    background: #4bd88f; /* hijau Instagram */
    animation: ap-wave 0.8s ease-in-out infinite;
}
.ap-bar:nth-child(1) { height: 6px; animation-delay: 0s; }
.ap-bar:nth-child(2) { height: 10px; animation-delay: 0.15s; }
.ap-bar:nth-child(3) { height: 6px; animation-delay: 0.3s; }

@keyframes ap-wave {
    0%, 100% { transform: scaleY(0.6); }
    50%      { transform: scaleY(1.0); }
}

.ap-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
    text-align: center;
}
.ap-root:hover .ap-label,
.ap-root:focus-visible .ap-label {
    max-width: 120px;
    opacity: 1;
    margin-left: 2px;
}

.ap-icon-wrap {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Close button: absolute positioning alternative (optional) */
.sv-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;      /* never shrink */
    transition: background 0.15s;
}

/* Alternative: absolute positioning untuk X (paling robust) */
.sv-header--absolute-x {
    position: relative;
}
.sv-header--absolute-x .sv-close-btn {
    position: absolute;
    top: 10px;
    right: 14px;
    z-index: 11;
}


/* Scale badge di kiri overlay */
.drg-scale-badge {
    position: absolute;
    left: -48px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    animation: badge-pop 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.drg-scale-badge__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.3);
}
.drg-scale-badge__text {
    color: white;
    font-size: 11px;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    font-family: -apple-system, sans-serif;
    min-width: 28px;
}

/* Instagram text styles */
.ig-text-classic {
    font-family: "Bebas Neue", "Arial Black", sans-serif;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
    font-weight: 600;
}
.ig-text-modern {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    letter-spacing: -0.3px;
}
.ig-text-strong {
    font-family: "Arial Black", sans-serif;
    text-transform: uppercase;
    background: rgba(0,0,0,0.8);
    padding: 4px 12px;
    border-radius: 4px;
}
.ig-text-typewriter {
    font-family: "Courier New", monospace;
    background: rgba(0,0,0,0.75);
    padding: 6px 10px;
}

/* Panel teks */
.sc-text-preview-box {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 12px;
    transition: all 0.15s ease;
    word-break: break-word;
}
.sc-text-edit-row {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}
.sc-size-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 40px;
}
.sc-slider-vertical {
    writing-mode: vertical-lr;
    direction: rtl;
    height: 120px;
    width: 4px;
    accent-color: #fff;
}
.sc-size-label {
    color: white;
    font-size: 11px;
    font-weight: 700;
}
.sc-text-controls {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sc-font-carousel {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0;
}
.sc-font-chip {
    white-space: nowrap;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.3);
    background: transparent;
    color: white;
    font-size: 13px;
}
.sc-font-chip--aktif {
    background: white;
    color: black;
    border-color: white;
}
.sc-align-row {
    display: flex;
    gap: 8px;
}
.sc-align-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.2);
    background: transparent;
    color: white;
    font-size: 16px;
}
.sc-align-btn--aktif {
    background: rgba(255,255,255,0.2);
}
.sc-bg-toggle {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.3);
    background: transparent;
    color: white;
    font-size: 12px;
    font-weight: 700;
}
.sc-bg-toggle--on {
    background: white;
    color: black;
}

/* ==== components.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   SHARED COMPONENTS
   Auto-extracted from styles.css — edit this file for page-specific styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Grid Background (auth pages) ──────────────────────────────────────────── */
.grid-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--bg-base);
}
.grid-lines {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--map-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--map-grid) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent);
}
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
}
.orb-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--accent-blue) 0%, transparent 70%);
    top: -100px;
    left: -100px;
    animation: orbFloat 8s ease-in-out infinite;
}
.orb-2 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--accent-lime) 0%, transparent 70%);
    bottom: -80px;
    right: -80px;
    animation: orbFloat 10s ease-in-out infinite reverse;
}

/* ── INPUTS ─────────────────────────────────────────────────────────────────── */
.field-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.field-label {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.field-box {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}
.field-box--focused {
    border-color: rgba(79, 107, 255, 0.6);
    box-shadow: 0 0 0 3px rgba(79, 107, 255, 0.12);
}
.field-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 14px;
    padding: 14px 16px;
    width: 100%;
}
.field-input::placeholder {
    color: var(--text-muted);
}
.field-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.pass-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0 14px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}
.pass-toggle:hover {
    color: var(--text-secondary);
}

/* ── BANNERS / ALERTS ───────────────────────────────────────────────────────── */
.error-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 79, 107, 0.1);
    border: 1px solid rgba(255, 79, 107, 0.25);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 12px;
    color: var(--danger);
    animation: fadeUp 0.3s ease both;
}
.success-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(75, 216, 143, 0.08);
    border: 1px solid rgba(75, 216, 143, 0.25);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 12px;
    color: var(--live-green);
    animation: fadeUp 0.3s ease both;
}
.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(128, 128, 128, 0.3);
    border-top-color: var(--text-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: inline-block;
}

/* ── PAGE HEADER (canonical — semua halaman gunakan ini) ──────────────────── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--bg-page);
    border-bottom: 1px solid var(--border-soft);
    width: 100%;
    min-width: 0;
}

/* ── BACK BUTTON (canonical — semua halaman gunakan ini) ──────────────────── */
.back-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
    text-decoration: none;
    padding: 0;
}
.back-btn:hover {
    background: var(--bg-elevated-2);
}

/* ── HEADER BELL ────────────────────────────────────────────────────────────── */
.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.bell-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.bell-btn:hover {
    background: var(--bg-card-hover);
}
.bell-dot {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-lime);
    border: 2px solid var(--bg-page);
    box-shadow: 0 0 8px rgba(166, 217, 106, 0.6);
}

/* ── THEME TOGGLE BUTTON ────────────────────────────────────────────────────── */
.theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    cursor: pointer;
    transition:
        background 0.2s,
        color 0.2s,
        border-color 0.2s,
        transform 0.2s;
    padding: 0;
    flex-shrink: 0;
}
.theme-toggle:hover {
    background: var(--bg-card-hover);
    color: var(--accent-lime);
    transform: rotate(12deg);
}
.theme-toggle:active {
    transform: scale(0.94);
}
.auth-header .theme-toggle {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}
[data-theme="light"] .auth-header .theme-toggle {
    background: var(--bg-card);
    border-color: var(--border);
    color: var(--text-primary);
}

/* ── Icon color helpers (used by inline SVGs that previously hardcoded gray strokes) ──── */
.search-bar svg,
.search-wrap svg,
.orders-search svg,
.empty-state svg,
.ticket-venue-row svg,
.menu-item > svg:last-child {
    color: var(--text-muted);
}

/* ── BANNER SLIDER ──────────────────────────────────────────────────────────── */
.banner-slider-wrap {
    overflow: hidden;
    margin-bottom: 20px;
    touch-action: pan-y;
}

/* outer drag container — full width, no visible clip */
.banner-track-outer {
    width: 100%;
    overflow: hidden;
}

/* The moving track: slides are not percentage-based anymore;
   we use translate3d(calc(-N * slideWidth + dragDelta), 0, 0)
   driven entirely from Rust. CSS just provides the snap transition. */
.banner-track {
    display: flex;
    will-change: transform;
    /* transition applied inline when NOT dragging; none when dragging */
}

.banner-slide {
    flex: 0 0 calc(100% - 40px);
    /* first/last handled inline or with :first-child / :last-child */
    margin: 0 6px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    height: 180px;
    user-select: none;
    -webkit-user-drag: none;
}
.banner-slide:first-child {
    margin-left: 20px;
}
.banner-slide:last-child {
    margin-right: 20px;
}

/* inner link fills the slide */
.banner-slide-inner {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.banner-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.2) 55%,
        transparent 100%
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px;
    gap: 6px;
    pointer-events: none;
}
.slide-badge {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.14em;
    padding: 3px 9px;
    border-radius: 100px;
    font-weight: 700;
    align-self: flex-start;
}
.slide-badge--live {
    background: var(--accent-lime);
    color: var(--text-on-accent);
}
.slide-badge--upcoming {
    background: rgba(79, 107, 255, 0.85);
    color: #fff;
}
.slide-badge--sale {
    background: rgba(255, 107, 79, 0.85);
    color: #fff;
}
.slide-badge--featured {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
}
.banner-title {
    font-family: var(--font-display);
    font-size: 26px;
    color: #fff;
    line-height: 1;
    letter-spacing: 0.04em;
}
.banner-subtitle {
    display: none;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.65;
    max-width: 480px;
}
.banner-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.banner-date {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.06em;
}
.banner-price {
    font-family: var(--font-body);
    font-size: 13px;
    color: #a6d96a;
    font-weight: 700;
}
.banner-cta-btn {
    display: none;
}

.banner-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 10px 0 0;
}
.bdot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bdot-inactive);
    cursor: pointer;
    transition: all 0.2s;
    display: inline-block;
    border: none;
    padding: 0;
}
.bdot--active {
    background: var(--accent-lime);
    width: 18px;
    border-radius: 4px;
}
   MERCHANT — CREATE EVENT form & inventory header
   ══════════════════════════════════════════════════════════════════════════════ */

/* Inventory header row with NEW EVENT button */
.mhub-inv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.mhub-new-event-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--accent-lime);
    border: none;
    border-radius: 100px;
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: opacity 0.2s;
}
.mhub-new-event-btn:hover {
    opacity: 0.88;
}

/* Modal — form section dividers */
.mhub-form-section-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--accent-lime);
    padding: 8px 0 4px;
    border-bottom: 1px solid rgba(166, 217, 106, 0.15);
    margin-bottom: 10px;
}

/* Ticket tier blocks inside modal */
.mhub-tier-block {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}
.mhub-tier-block--vip {
    border-color: rgba(79, 107, 255, 0.3);
    background: rgba(79, 107, 255, 0.04);
}

.mhub-tier-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mhub-tier-block-name {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-primary);
}
.mhub-tier-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.mhub-tier-check {
    width: 14px;
    height: 14px;
    accent-color: var(--accent-lime);
    cursor: pointer;
}
.mhub-tier-toggle-label {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

/* Make modal scrollable on small screens */
.mhub-modal {
    max-height: 88dvh;
    overflow-y: auto;
}
.mhub-modal-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CHAT — 1-message limit UI + merchant badge
   ══════════════════════════════════════════════════════════════════════════════ */

/* Merchant unlimited badge */
.chat-merchant-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    margin: 0;
    background: linear-gradient(90deg, rgba(79, 107, 255, 0.12) 0%, rgba(166, 217, 106, 0.06) 100%);
    border-bottom: 1px solid var(--border-soft);
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--accent-lime);
}
.chat-merchant-badge svg {
    color: var(--accent-lime);
    flex-shrink: 0;
}

/* Input hint counter (hanya untuk user biasa, 1 pesan tersisa) */
.chat-send-hint {
    text-align: center;
    padding: 4px 20px 6px;
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    background: var(--overlay-blur);
    position: fixed;
    bottom: 72px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
}

/* Input "last chance" highlight */
.chat-input--last-chance {
    border-color: rgba(166, 217, 106, 0.35);
}
.chat-input--last-chance:focus {
    border-color: var(--accent-lime);
}

/* Read-only bar — user sudah habis jatah */
.chat-readonly-bar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px 28px;
    background: var(--overlay-blur);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    z-index: 20;
}
.chat-readonly-bar svg {
    flex-shrink: 0;
    color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════════════════════
   CHECKOUT — group join notification (muncul singkat setelah bayar)
   ══════════════════════════════════════════════════════════════════════════════ */

.checkout-group-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    margin: 0 0 8px;
    background: rgba(166, 217, 106, 0.08);
    border: 1px solid rgba(166, 217, 106, 0.2);
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-primary);
    line-height: 1.5;
}
.checkout-group-notice svg {
    color: var(--accent-lime);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MESSAGES LIST — empty state & loading
   ═══════════════════════════════════════════════════════════════════════════ */
.msg-loading,
.msg-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 20px;
    color: var(--text-muted);
    font-size: 13px;
}
.msg-error {
    color: var(--danger);
}
.msg-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 24px;
    text-align: center;
    color: var(--text-muted);
}
.msg-empty p {
    font-size: 13px;
    margin: 0;
}
.msg-empty-sub {
    font-size: 11px;
    opacity: 0.7;
}
.msg-explore-btn {
    margin-top: 8px;
    padding: 11px 24px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    border-radius: 100px;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHAT ROOM — loading, avatar placeholder, merchant badge inline
   ═══════════════════════════════════════════════════════════════════════════ */
.chat-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}
.chat-other-avatar-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}
.chat-merchant-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(166, 217, 106, 0.12);
    border: 1px solid rgba(166, 217, 106, 0.25);
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent-lime);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   SHIMMER / SKELETON LOADING
   ═══════════════════════════════════════════════════════════════════════ */

/* Skeleton placeholder — lihat .shim di bagian bawah untuk animasi */

/* ── Event card skeleton ──────────────────────────────────────────────── */
.shim-event-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    overflow: hidden;
}
.shim-event-card .shim-img {
    height: 170px;
    width: 100%;
}
.shim-event-card .shim-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.shim-event-card .shim-cat {
    height: 9px;
    width: 60px;
}
.shim-event-card .shim-title {
    height: 22px;
    width: 80%;
}
.shim-event-card .shim-date {
    height: 10px;
    width: 50%;
}
.shim-event-card .shim-foot {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
}
.shim-event-card .shim-venue {
    height: 10px;
    width: 40%;
}
.shim-event-card .shim-price {
    height: 13px;
    width: 25%;
}

/* ── Ticket card skeleton ── dimensi mengikuti .ticket-card asli ─────── */
.shim-ticket-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.shim-ticket-card + .shim-ticket-card {
    margin-top: 16px;
}
.shim-ticket-card .shim-tkt-cover {
    height: 180px;
    width: 100%;
    border-radius: 0;
}
.shim-tkt-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.shim-ticket-card .shim-tkt-title {
    height: 26px;
    width: 70%;
}
.shim-ticket-card .shim-tkt-venue {
    height: 11px;
    width: 55%;
}
.shim-tkt-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.shim-tkt-meta .shim-tkt-meta-item {
    height: 30px;
}
.shim-tkt-qr-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.shim-tkt-qr-wrap .shim-tkt-qr {
    width: 184px;
    height: 184px;
    border-radius: 12px;
}
.shim-tkt-qr-wrap .shim-tkt-code {
    height: 11px;
    width: 130px;
}
.shim-tkt-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.shim-ticket-card .shim-tkt-badge {
    height: 30px;
    width: 100px;
    border-radius: 100px;
}
.shim-tkt-foot .shim-tkt-price {
    height: 16px;
    width: 90px;
}

/* ── Order card skeleton ──────────────────────────────────────────────── */
.shim-order-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.shim-order-card .shim-ord-code {
    height: 14px;
    width: 45%;
}
.shim-order-card .shim-ord-event {
    height: 18px;
    width: 70%;
}
.shim-order-card .shim-ord-status {
    height: 22px;
    width: 80px;
    border-radius: 100px;
}
.shim-order-card .shim-ord-amount {
    height: 14px;
    width: 35%;
}

/* ── Merchant inventory skeleton ─────────────────────────────────────── */
.shim-merchant-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-soft);
    gap: 12px;
}
.shim-merchant-row .shim-mr-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.shim-merchant-row .shim-mr-name {
    height: 14px;
    width: 65%;
}
.shim-merchant-row .shim-mr-venue {
    height: 11px;
    width: 45%;
}
.shim-merchant-row .shim-mr-badge {
    height: 20px;
    width: 60px;
    border-radius: 100px;
}

/* ── Merchant/Admin event card skeleton (mirrors .mhub-event-card) ────── */
.shim-mhub-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 16px;
}
.shim-mhub-card .shim-mhub-img {
    width: 100%;
    aspect-ratio: 16 / 8;
    display: block;
    border-radius: 0;
}
.shim-mhub-card .shim-mhub-body {
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.shim-mhub-card .shim-mhub-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.shim-mhub-card .shim-mhub-title { height: 19px; width: 58%; }
.shim-mhub-card .shim-mhub-price { height: 18px; width: 24%; }
.shim-mhub-card .shim-mhub-meta  { height: 11px; width: 72%; }
.shim-mhub-card .shim-mhub-key   { height: 10px; width: 28%; }
.shim-mhub-card .shim-mhub-bar   { height: 6px;  width: 100%; border-radius: 3px; }
.shim-mhub-card .shim-mhub-btn   { height: 38px; width: 100%; border-radius: 12px; margin-top: 2px; }

/* ── Message room skeleton ────────────────────────────────────────────── */
.shim-msg-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}
.shim-msg-row .shim-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
}
.shim-msg-row .shim-msg-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.shim-msg-row .shim-msg-name {
    height: 14px;
    width: 55%;
}
.shim-msg-row .shim-msg-preview {
    height: 11px;
    width: 80%;
}

/* ═══════════════════════════════════════════════════════════════════════
   EMPTY STATES
   ═══════════════════════════════════════════════════════════════════════ */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 32px;
    text-align: center;
    gap: 12px;
}
.empty-state-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 4px;
}
.empty-state-title {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
}
.empty-state-body {
    font-size: 13px;
    color: var(--text-secondary);
    max-width: 260px;
    line-height: 1.6;
}
.empty-state-cta {
    margin-top: 8px;
    padding: 12px 28px;
    min-height: 44px;
    background: var(--accent-blue);
    color: #fff;
    border-radius: 100px;
    font-size: 12px;
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: opacity 0.15s, transform 0.1s;
}
.empty-state-cta:hover { opacity: 0.88; }
.empty-state-cta:active { transform: scale(0.97); }

/* ══════════════════════════════════════════════════════════════════════════════
/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL UI/UX IMPROVEMENTS (no duplicates)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page enter animation */
/* page-enter TIDAK boleh pakai transform — transform membuat new containing block
   yang menyebabkan position:fixed children (bottom-nav, buy-footer, dll.) ikut
   scroll bersama .page alih-alih menempel di viewport. Gunakan opacity saja. */
@keyframes page-enter {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.page {
    animation: page-enter 0.18s ease-out both;
}

/* Focus rings */
input:focus,
select:focus,
textarea:focus,
button:focus-visible {
    outline: 2px solid var(--accent-lime);
    outline-offset: 2px;
}

/* Bottom nav micro-interaction */
.bottom-item {
    transition:
        color 0.15s ease,
        transform 0.1s ease;
}
.bottom-item:active {
    transform: scale(0.92);
}
.bottom-item--active svg {
    filter: drop-shadow(0 0 5px var(--accent-lime));
}

/* EventCard hover lift */
.explore-event-card-v2 {
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}
.explore-event-card-v2:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

/* Shimmer v2 — base fill + sheen band yang melintas via ::after translateX.
   Lebih smooth & performant vs background-position sweep. */
@keyframes shimmer-sheen {
    0% {
        transform: translateX(-120%);
    }
    100% {
        transform: translateX(120%);
    }
}
@keyframes shimmer-breathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}
.shim {
    position: relative;
    overflow: hidden;
    background: var(--bg-elevated);
    border-radius: 8px;
    isolation: isolate;
}
.shim::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-120%);
    background: linear-gradient(
        100deg,
        transparent 0%,
        var(--bg-elevated-2, rgba(255, 255, 255, 0.07)) 45%,
        rgba(255, 255, 255, 0.12) 50%,
        var(--bg-elevated-2, rgba(255, 255, 255, 0.07)) 55%,
        transparent 100%
    );
    animation: shimmer-sheen 1.25s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
    .shim::after { animation: none; }
    .shim { animation: shimmer-breathe 1.8s ease-in-out infinite; }
}
/* ── Cart skeleton (shown during SSR / pre-hydration) ───────────────────────── */
.cart-skeleton {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0 0 20px;
}

.cart-item-shim {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-bottom: 1px solid var(--border-soft);
}

/* ═══════════════════════════════════════════════════════════════════════════
   EVENT DETAIL — New UI matching design
   ═══════════════════════════════════════════════════════════════════════════ */

/* Breadcrumb */
.ed-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px 4px;
    font-size: 11px;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
}
.ed-breadcrumb-step--done {
    color: var(--accent-lime);
}
.ed-breadcrumb-sep {
    opacity: 0.5;
}
.ed-breadcrumb-current {
    color: var(--text-secondary);
}

/* Meta bar */
.ed-meta-bar {
    padding: 4px 16px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ed-meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ed-meta-event-title {
    font-size: 11px;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
}
.ed-meta-row--sub {
    font-size: 11px;
    color: var(--text-tertiary);
}
.ed-meta-by {
    opacity: 0.7;
}
.ed-meta-organizer {
    color: var(--accent-lime);
    font-weight: 600;
}
.ed-meta-platform-sep {
    opacity: 0.4;
}
.ed-meta-platform {
    color: var(--text-secondary);
    text-decoration: underline;
    cursor: pointer;
}

/* Cover with selling badge */
.ed-cover-wrap {
    position: relative;
    margin: 0 0 0;
}
.ed-cover-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}
.ed-selling-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(166, 217, 106, 0.15);
    border: 1px solid var(--accent-lime);
    color: var(--accent-lime);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 5px 10px;
    border-radius: 100px;
    backdrop-filter: blur(8px);
}
.ed-selling-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-lime);
    animation: pulse-dot 1.2s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.7);
    }
}

/* Title block */
.ed-title-block {
    padding: 16px 16px 4px;
}
.ed-event-title {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--text-primary);
    letter-spacing: 0.03em;
    line-height: 1.1;
    margin: 0 0 12px;
}
.ed-event-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ed-event-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}
.ed-event-meta-item svg {
    flex-shrink: 0;
}

/* Section blocks */
.ed-section-block {
    padding: 18px 16px 4px;
}
.ed-section-label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-tertiary);
    margin: 0 0 14px;
}
.ed-section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.ed-section-row .ed-section-label {
    margin-bottom: 0;
}
.ed-see-all-link {
    font-size: 12px;
    color: var(--accent-lime);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* Category grid (ticket tiers as cards) */
.ed-category-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.ed-cat-card-full {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: border-color 0.15s;
}
.ed-cat-card-full:first-child {
    border-color: var(--accent-lime);
    background: rgba(166, 217, 106, 0.04);
}
.ed-cat-card-left {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ed-cat-type-badge {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
    margin-bottom: 2px;
}
.ed-cat-sub {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
}
.ed-cat-price-row {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 4px;
}
.ed-cat-avail-row {
    font-size: 10px;
    color: var(--accent-lime);
    letter-spacing: 0.1em;
    font-weight: 700;
}

/* About text */
.ed-about-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.8;
    margin: 0;
}
.ed-read-more {
    color: var(--accent-lime);
    cursor: pointer;
    font-weight: 600;
}

/* Venue map card */
.ed-map-card {
    border-radius: 20px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
}
.ed-map-visual {
    position: relative;
    height: 140px;
    background: var(--bg-elevated);
    overflow: hidden;
}
.ed-map-visual .map-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--border-soft) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.6;
}
.ed-map-visual .map-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    filter: drop-shadow(0 4px 12px rgba(166, 217, 106, 0.4));
}
.ed-map-info {
    padding: 14px 16px 16px;
}
.ed-map-name {
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.ed-map-addr {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 12px;
}
.ed-directions-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(166, 217, 106, 0.1);
    border: 1px solid rgba(166, 217, 106, 0.3);
    border-radius: 100px;
    color: var(--accent-lime);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}
.ed-directions-btn:hover {
    background: rgba(166, 217, 106, 0.18);
}

/* Essential info accordion */
.ed-accordion {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    overflow: hidden;
}
.ed-accordion-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: var(--bg-card);
    border: none;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background 0.15s;
}
.ed-accordion-item:last-of-type {
    border-bottom: none;
}
.ed-accordion-item:hover {
    background: var(--bg-elevated);
}
.ed-accordion-body {
    padding: 12px 16px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.7;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-soft);
}

/* BUY TICKETS sticky footer */
.ed-buy-footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    background: var(--overlay-blur, rgba(13, 13, 26, 0.92));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    padding: 14px 20px calc(20px + env(safe-area-inset-bottom, 12px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    z-index: 50;
}
.ed-buy-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ed-buy-label {
    font-size: 10px;
    color: var(--text-tertiary);
    letter-spacing: 0.1em;
    font-weight: 700;
}
.ed-buy-price {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
}
.ed-buy-btn {
    flex-shrink: 0;
    padding: 14px 28px;
    background: var(--accent-lime);
    color: #16151d;
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition:
        opacity 0.15s,
        transform 0.1s;
}
.ed-buy-btn:hover {
    opacity: 0.9;
    transform: scale(1.02);
}
.ed-buy-btn:active {
    transform: scale(0.98);
}

/* Bottom padding for sticky footer on event detail */
.ed-page {
    padding-bottom: 90px;
}

   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Fixed footer z-index layering (prevents overlap on same page) ─────── */
.bottom-nav {
    z-index: var(--z-nav-top);
}
.ed-buy-footer {
    z-index: var(--z-footer);
}
.sticky-footer {
    z-index: var(--z-footer);
}
.cart-footer {
    z-index: var(--z-footer);
}
.pay-bar {
    z-index: var(--z-footer);
}
.chat-input-bar {
    z-index: var(--z-overlay);
}

/* Pages that use a secondary fixed footer exclude .bottom-nav via component.
   Add bottom offset so secondary footers don't overlap bottom-nav. */
.ed-buy-footer {
    /* bottom-nav height ≈ 64px; buy footer sits above it on pages without nav */
    bottom: 0;
}

/* ── 2. Light-theme overrides — new components ─────────────────────────────── */

/* Event Detail — selling badge */
[data-theme="light"] .ed-selling-badge {
    background: rgba(61, 102, 0, 0.12);
    border-color: var(--accent-lime);
    color: var(--accent-lime);
}
[data-theme="light"] .ed-selling-dot {
    background: var(--accent-lime);
}

/* Event Detail — category cards */
[data-theme="light"] .ed-cat-card-full {
    background: var(--bg-card);
    border-color: var(--border);
    box-shadow: var(--shadow-card);
}
[data-theme="light"] .ed-cat-card-full:first-child {
    border-color: var(--accent-lime);
    background: rgba(61, 102, 0, 0.05);
}
[data-theme="light"] .ed-cat-avail-row {
    color: var(--accent-lime);
}

/* Event Detail — directions button */
[data-theme="light"] .ed-directions-btn {
    background: rgba(61, 102, 0, 0.1);
    border-color: rgba(61, 102, 0, 0.28);
    color: var(--accent-lime);
}
[data-theme="light"] .ed-directions-btn:hover {
    background: rgba(61, 102, 0, 0.17);
}

/* Event Detail — map visual */
[data-theme="light"] .ed-map-visual {
    background: var(--bg-elevated);
}
[data-theme="light"] .ed-map-visual .map-grid {
    background-image:
        linear-gradient(var(--map-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--map-grid) 1px, transparent 1px);
}
[data-theme="light"] .ed-map-visual .map-pin {
    filter: drop-shadow(0 4px 12px rgba(61, 102, 0, 0.35));
}

/* Event Detail — accordion */
[data-theme="light"] .ed-accordion {
    border-color: var(--border);
}
[data-theme="light"] .ed-accordion-item {
    background: var(--bg-card);
    border-bottom-color: var(--border);
    color: var(--text-primary);
}
[data-theme="light"] .ed-accordion-item:hover {
    background: var(--bg-card-hover);
}
[data-theme="light"] .ed-accordion-body {
    background: var(--bg-elevated);
    border-bottom-color: var(--border);
}

/* Event Detail — buy footer */
[data-theme="light"] .ed-buy-footer {
    background: var(--overlay-blur);
    border-top-color: var(--border);
}
[data-theme="light"] .ed-buy-btn {
    color: var(--text-on-accent);
}

/* Event Detail — breadcrumb & meta */
[data-theme="light"] .ed-breadcrumb-step--done {
    color: var(--accent-lime);
}
[data-theme="light"] .ed-meta-organizer {
    color: var(--accent-lime);
}
[data-theme="light"] .ed-read-more {
    color: var(--accent-lime);
}

/* Explore — search bar */
[data-theme="light"] .exp-search-inner {
    background: var(--bg-card);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-card);
}
[data-theme="light"] .exp-search-inner:focus-within {
    border-color: var(--accent-lime);
    box-shadow: 0 0 0 3px rgba(61, 102, 0, 0.13);
}
[data-theme="light"] .exp-search-bar--sticky {
    background: var(--bg-base);
    border-bottom-color: var(--border);
}

/* Explore — chips */
[data-theme="light"] .exp-chip {
    background: var(--bg-elevated);
    border-color: var(--border);
    color: var(--text-secondary);
}
[data-theme="light"] .exp-chip:hover {
    border-color: var(--accent-lime);
    color: var(--text-primary);
}
[data-theme="light"] .exp-chip--on {
    background: var(--accent-lime);
    border-color: var(--accent-lime);
    /* lime in light is dark green #3d6600 — white text for contrast */
    color: #ffffff;
}

/* Explore — banner dots */
[data-theme="light"] .exp-bdot {
    background: var(--border-strong);
}
[data-theme="light"] .exp-bdot--on {
    background: var(--accent-lime);
}

/* Explore — results bar */
[data-theme="light"] .exp-results-eyebrow {
    color: var(--accent-lime);
}

/* Explore — clear button */
[data-theme="light"] .exp-clear-btn {
    background: rgba(188, 24, 48, 0.08);
    border-color: rgba(188, 24, 48, 0.22);
    color: var(--danger);
}
[data-theme="light"] .exp-clear-btn:hover {
    background: rgba(188, 24, 48, 0.14);
}

/* Explore — reset button */
[data-theme="light"] .exp-reset-btn {
    color: #ffffff;
}

/* Explore — hero */
[data-theme="light"] .exp-hero-dot {
    color: var(--accent-lime);
}

/* Home banner (legacy .home-banner-*) */
[data-theme="light"] .home-bdot {
    background: var(--border-strong);
}
[data-theme="light"] .home-bdot--on {
    background: var(--accent-lime);
}

/* ── 3. Hero overlay — softer gradient for light mode ────────────────────── */
[data-theme="light"] .hero-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.12) 55%,
        transparent 100%
    );
}
/* Also soften the banner slide overlay and ed-cover on light */
[data-theme="light"] .banner-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.1) 55%,
        transparent 100%
    );
}
[data-theme="light"] .event-card-cat-badge {
    background: rgba(255, 255, 255, 0.82);
    color: var(--accent-blue);
    border-color: var(--border);
}

/* ── 4. Slim down the mega-transition selector ───────────────────────────── */
/* Override: restrict theme-transition to only structural containers.
   Interactive elements get their own targeted transitions. */
.exp-chip,
.exp-search-inner,
.exp-search-bar,
.ed-cat-card-full,
.ed-accordion-item,
.ed-accordion-body,
.ed-buy-footer,
.ed-map-card,
.home-banner-slider {
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── STORY: Panel Geser — drag handle centered, title+close aligned ────────── */

/* Panel geser needs top padding for the absolute drag handle */
.sc-panel-geser {
    padding-top: 28px !important;
    position: relative !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 72dvh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
}

/* Drag handle: absolute top-center of the panel, NOT part of flex row */
.sc-garis-pemisah {
    position: absolute !important;
    top: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 38px !important;
    height: 4px !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border-radius: 3px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

/* Panel header: title centered between spacer and close btn */
.sc-panel-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 14px !important;
    min-height: 28px !important;
}

/* When garis-pemisah is first child in panel-header, zero it out of flow */
.sc-panel-header > .sc-garis-pemisah:first-child {
    position: absolute !important;
    /* already handled above */
    flex-shrink: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Title takes up the space between the hidden handle and the close btn */
.sc-judul-panel {
    flex: 1 !important;
    font-family: var(--font-display) !important;
    font-size: 20px !important;
    letter-spacing: 0.05em !important;
    color: #fff !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* Close button: consistent size, no accidental flex-grow */
.sc-tombol-tutup-panel {
    flex-shrink: 0 !important;
    margin-left: auto !important;
}

/* When there's NO title (judul is empty), still keep close btn right-aligned */
.sc-panel-header:not(:has(.sc-judul-panel)) .sc-tombol-tutup-panel {
    margin-left: auto;
}

/* Story toolbar: always accessible on right side, not left */
.sc-toolbar-samping {
    right: 14px !important;
    left: auto !important;
}

/* Story viewfinder: make sure panel doesn't cover bottom controls */
.sc-panel-geser {
    bottom: 80px !important;
}

/* sc-area-bawah: clear above mode bar */
.sc-area-bawah {
    bottom: 44px !important;
}

/* Story: filter thumb showing the actual filter color */
.sc-thumb-filter.filter-clarendon { filter: contrast(1.2) saturate(1.3); }
.sc-thumb-filter.filter-gingham   { filter: brightness(1.05) hue-rotate(-10deg); }
.sc-thumb-filter.filter-moon      { filter: grayscale(1) contrast(1.1); }
.sc-thumb-filter.filter-lark      { filter: contrast(0.9); }
.sc-thumb-filter.filter-reyes     { filter: sepia(0.5) contrast(0.9); }
.sc-thumb-filter.filter-juno      { filter: contrast(1.1) saturate(1.2); }
.sc-thumb-filter.filter-slumber   { filter: brightness(0.9) saturate(0.8); }
.sc-thumb-filter.filter-crema     { filter: sepia(0.3) contrast(0.95); }
.sc-thumb-filter.filter-ludwig    { filter: saturate(1.1) contrast(1.05); }

/* Story: text preview box min-height for usability */
.sc-text-preview-box {
    min-height: 72px !important;
    border-radius: 12px !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
}

/* Story: font chip scroll container */
.sc-font-carousel {
    overflow-x: auto !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
}
.sc-font-carousel::-webkit-scrollbar { display: none; }

/* Story: sticker grid on small panels */
.sc-grid-stiker {
    max-height: 200px !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
}
.sc-grid-stiker::-webkit-scrollbar { display: none; }

/* ─────────────────────────────────────────────────────────────────────────────
   TICKET DETAIL — Missing layout classes (td-mobile-layout, td-page-title,
   td-hero-img, td-hero-gradient, td-hero-content, td-empty-state)
   ───────────────────────────────────────────────────────────────────────────── */

/* Page title in the header (center of page-header) */
.td-page-title {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.08em;
    color: var(--text-primary);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    pointer-events: none;
}

/* Full-page layout wrapper for ticket detail content */
.td-mobile-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: 80px;
}

/* Hero: full-bleed image area, overrides old td-hero margins for the image version */
.td-hero {
    position: relative;
    width: 100%;
    height: 260px;
    margin: 0;               /* full width, no side margins */
    border-radius: 0;        /* no radius — image goes edge-to-edge */
    overflow: hidden;
    flex-shrink: 0;
}

/* Actual cover image inside the hero */
.td-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Dark gradient overlay from bottom */
.td-hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(8, 8, 16, 0.15) 0%,
        rgba(8, 8, 16, 0)    35%,
        rgba(8, 8, 16, 0.75) 80%,
        rgba(8, 8, 16, 0.95) 100%
    );
}

/* Text content sitting on top of the gradient */
.td-hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* td-confirmed badge is already defined; keep, but make sure it fits inside hero-content */
.td-hero-content .td-confirmed {
    align-self: flex-start;
}

/* td-event-title inside hero — white text over image */
.td-hero-content .td-event-title {
    color: #fff;
    font-size: 34px;
    line-height: 1;
}

/* Stub card: sits flush under the hero, no top border-radius gap */
.td-stub {
    margin: 0 16px;
    border-radius: 0 0 20px 20px;
    border-top: none;
}

/* Empty / not-found state */
.td-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 24px;
    text-align: center;
}
.td-empty-state h2 {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    margin: 0;
}
.td-empty-state p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    max-width: 260px;
    line-height: 1.6;
}
.td-empty-state .td-btn {
    margin-top: 8px;
    text-decoration: none;
}

/* td-stub-bottom: more breathing room */
.td-stub-bottom {
    padding: 20px 20px 28px;
}

/* QR box: white background is fine in dark mode, but needs border in light */
[data-theme="light"] .td-qr {
    border: 1px solid var(--border);
}

/* Pulse strip: bottom margin accounts for nav */
.td-pulse-strip {
    margin: 0 16px 100px;
}

/* Actions: full width inside the layout container */
.td-actions {
    padding: 16px 16px 8px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MERCHANT CREATE / EDIT EVENT — Layout polish & fixes
   ───────────────────────────────────────────────────────────────────────────── */

/* medit-page: ensure scrollable content above sticky footer */
.medit-page {
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
}

/* medit-container: clean vertical stack with consistent spacing */
.medit-container {
    gap: 18px !important;
    padding: 0 16px 100px !important; /* extra bottom for sticky footer */
}

/* medit-header: full-width header card for create event (no back btn) */
.medit-header {
    background: var(--bg-page);
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border-soft);
    margin: 0 -16px;
    width: calc(100% + 32px);
    box-sizing: border-box;
}

/* medit-header-top: center title */
.medit-header-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    position: relative;
}

/* medit-title: clear uppercase treatment */
.medit-title {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin: 0;
    text-align: center;
}

/* Back button inside header-top: absolute left */
.medit-header-top .medit-back-btn {
    position: absolute;
    left: 0;
}

/* Section header: consistent spacing above form groups */
.medit-section-header {
    margin-top: 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(166, 217, 106, 0.12);
}

.medit-section-label {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.22em;
    color: var(--accent-lime);
    text-transform: uppercase;
    opacity: 0.85;
}

/* Field group: tighter gap for labels + inputs */
.medit-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.medit-field-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* medit-input: consistent rounding and focus ring */
.medit-input,
.medit-textarea {
    border-radius: 10px !important;
}
.medit-input:focus,
.medit-textarea:focus {
    border-color: rgba(166, 217, 106, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(166, 217, 106, 0.1) !important;
}

/* Category grid: pill chips in a flex-wrap */
.medit-category-grid {
    gap: 7px !important;
}

.medit-checkbox-label {
    padding: 7px 14px !important;
    font-size: 10px !important;
}

/* File input wrapper: slightly larger tap target */
.medit-file-input-wrapper {
    padding: 14px 16px !important;
}

/* Cover preview: 16/9, rounded */
.medit-cover-preview {
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Variant card: consistent inner spacing */
.medit-variant-card {
    border-radius: 16px !important;
    padding: 16px !important;
    gap: 12px !important;
}

/* Variant name big input: bottom border accent on focus */
.medit-variant-name-input:focus {
    border-bottom-color: var(--accent-lime) !important;
}

/* Add variant row button: full width dashed */
.medit-add-variant-row {
    border-radius: 12px !important;
}

/* Sticky footer: extra safe-area on iOS */
.medit-sticky-footer {
    padding: 12px 16px max(20px, env(safe-area-inset-bottom, 20px)) !important;
}

/* Update/Publish button: bold CTA */
.medit-update-btn {
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    border-radius: 12px !important;
}

/* Error / success banners: smooth appear */
.medit-error-banner,
.medit-success-banner {
    border-radius: 10px !important;
    animation: fadeUp 0.25s ease both !important;
}

/* grid-2: consistent gap */
.medit-grid-2 {
    gap: 10px !important;
}

/* ── Light theme support for medit pages ─── */
[data-theme="light"] .medit-input,
[data-theme="light"] .medit-textarea {
    background: var(--bg-elevated);
    border-color: var(--border-strong);
    color: var(--text-primary);
}
[data-theme="light"] .medit-input:focus,
[data-theme="light"] .medit-textarea:focus {
    border-color: rgba(61, 102, 0, 0.5);
    box-shadow: 0 0 0 3px rgba(61, 102, 0, 0.1);
}
[data-theme="light"] .medit-section-label {
    color: var(--accent-lime);
}
[data-theme="light"] .medit-variant-card {
    background: var(--bg-elevated);
    border-color: var(--border);
}
[data-theme="light"] .medit-add-variant-row {
    border-color: rgba(61, 102, 0, 0.35);
    color: var(--accent-lime);
}
[data-theme="light"] .medit-add-variant-row:hover {
    background: rgba(61, 102, 0, 0.06);
    border-color: rgba(61, 102, 0, 0.6);
}
[data-theme="light"] .medit-header {
    background: var(--bg-page);
    border-color: var(--border);
}
[data-theme="light"] .medit-file-input-wrapper {
    border-color: var(--border-strong);
    background: var(--bg-elevated);
}
[data-theme="light"] .medit-file-input-wrapper:hover {
    border-color: var(--accent-lime);
}
[data-theme="light"] .medit-checkbox-label {
    background: var(--bg-elevated);
    border-color: var(--border);
    color: var(--text-secondary);
}
[data-theme="light"] .medit-checkbox-label:has(input:checked) {
    border-color: var(--accent-lime);
    background: rgba(61, 102, 0, 0.08);
    color: var(--text-primary);
}
[data-theme="light"] .medit-rp-prefix {
    color: var(--text-secondary);
}
[data-theme="light"] .medit-variant-name-input {
    color: var(--text-primary);
    border-bottom-color: var(--border-strong);
}
[data-theme="light"] .medit-variant-name-input:focus {
    border-bottom-color: var(--accent-lime);
}
[data-theme="light"] .medit-sticky-footer {
    background: var(--overlay-blur);
    border-color: var(--border);
}
[data-theme="light"] .medit-update-btn {
    color: #fff;
}

/* ── Ticket Detail: light mode ─── */
[data-theme="light"] .td-hero-gradient {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.1)  0%,
        rgba(0, 0, 0, 0)    30%,
        rgba(0, 0, 0, 0.55) 80%,
        rgba(0, 0, 0, 0.85) 100%
    );
}
[data-theme="light"] .td-hero-content .td-event-title {
    color: #fff; /* always white over image */
}
[data-theme="light"] .td-page-title {
    color: var(--text-primary);
}


/* ── EventGrid (komponen daftar event reusable) ─────────────────────────────
   <EventGrid/> memakai kontainer .exp-mkt-grid + kartu .exp-mkt-card (styling di
   09-page-explore.css) — SATU desain kartu dipakai Explore, Event Detail, /m/:id. */
.event-grid-empty {
    color: var(--text-muted);
    font-size: 14px;
    padding: 18px 0;
}
/* ==== message_stories.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   MESSAGES & CHAT PAGES
   Auto-extracted from styles.css — edit this file for page-specific styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   CHAT / MESSAGES PAGES — Design sesuai screenshot
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Messages list page ───────────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════════
   MESSAGES PAGE  /pulse
   ══════════════════════════════════════════════════════════════════════════════ */

.msg-page {
    padding-bottom: 80px;
    background: var(--bg-base);
    min-height: 100dvh;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    position: relative;
}

/* Header */
.msg-list-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--overlay-blur);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    /* relative so absolute title can center itself */
    position: sticky;
}
.msg-list-avatar-wrap {
    flex-shrink: 0;
}
.msg-list-avatar-placeholder {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}
.msg-list-avatar-img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}
.msg-list-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    white-space: nowrap;
    pointer-events: none;
}
.msg-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 6px;
    border-radius: 50%;
    transition: background 0.2s;
}
.msg-icon-btn:hover {
    background: var(--bg-elevated);
}

/* Search */
.msg-search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 16px;
    padding: 10px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
}
.msg-search-icon {
    color: var(--text-muted);
    flex-shrink: 0;
}
.msg-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
}
.msg-search-input::placeholder {
    color: var(--text-muted);
}

/* Conversation list */
.msg-convos-section {
    padding: 0 0 16px;
}
.msg-convos-label {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    padding: 14px 16px 8px;
}
.msg-convos-list {
    display: flex;
    flex-direction: column;
}
.msg-convo-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    transition: background 0.15s;
}
.msg-convo-row:hover {
    background: var(--bg-card-hover);
}
.msg-convo-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.msg-convo-avatar {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    object-fit: cover;
}
.msg-convo-live-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--live-green);
    border: 2px solid var(--bg-base);
    box-shadow: 0 0 6px var(--live-green);
    animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}
.msg-convo-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.msg-convo-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.msg-convo-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-convo-time {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
    letter-spacing: 0.04em;
}
.msg-convo-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
}
.msg-convo-preview {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.msg-convo-badge {
    min-width: 18px;
    height: 18px;
    border-radius: 100px;
    background: var(--accent-blue);
    color: #fff;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CHAT ROOM PAGE  /pulse/:id
   ══════════════════════════════════════════════════════════════════════════════ */

.chat-page {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    padding-bottom: 72px;
    background: var(--bg-page);
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    position: relative;
}

/* Header */
.chat-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--overlay-blur);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
}
.chat-back-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}
.chat-back-btn:hover {
    background: var(--bg-elevated);
}
.chat-header-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}
.chat-header-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chat-header-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-header-sub {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.chat-status-live {
    color: var(--live-green);
}
.chat-status-connecting {
    color: var(--text-muted);
}
.chat-header-actions {
    display: flex;
    gap: 4px;
}
.chat-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.chat-icon-btn:hover {
    background: var(--bg-elevated);
}

/* Messages area */
.chat-messages {
    flex: 1;
    padding: 16px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
}

/* Shimmer */
.chat-shimmer-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 0;
}
.chat-shimmer-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}
.chat-shimmer-row--self {
    flex-direction: row-reverse;
}
.chat-shimmer-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}
.chat-shimmer-bubble {
    border-radius: 18px;
    min-height: 44px;
}
.chat-shimmer-bubble--sm {
    width: 45%;
}
.chat-shimmer-bubble--md {
    width: 62%;
}
.chat-shimmer-bubble--lg {
    width: 74%;
    min-height: 60px;
}

/* Empty state */
.chat-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 60px 32px;
    text-align: center;
}
.chat-empty-icon {
    font-size: 44px;
}
.chat-empty-title {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--text-primary);
    letter-spacing: 0.05em;
}
.chat-empty-body {
    font-size: 13px;
    color: var(--text-muted);
    max-width: 240px;
    line-height: 1.6;
}

/* Rows */
.chat-row {
    display: flex;
    gap: 8px;
}
.chat-row--self {
    justify-content: flex-end;
}
.chat-row--other {
    align-items: flex-end;
}

/* Avatar inisial */
.chat-other-avatar-wrap {
    width: 36px;
    flex-shrink: 0;
}
.chat-other-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
}

/* Bubble */
.chat-bubble-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 75%;
}
.chat-bubble-wrap--self {
    align-items: flex-end;
}
.chat-sender-name {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    padding-left: 4px;
}
.chat-bubble {
    padding: 11px 15px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.55;
    word-break: break-word;
}
.chat-bubble-text {
    margin: 0 0 8px;
}
.chat-bubble--other {
    background: var(--bg-card);
    color: var(--text-primary);
    border-radius: 4px 18px 18px 18px;
    border: 1px solid var(--border-soft);
}
.chat-bubble--self {
    background: var(--accent-blue);
    color: #fff;
    border-radius: 18px 18px 4px 18px;
}
.chat-msg-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
}
.chat-msg-time {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}
.chat-msg-sent-icon {
    color: var(--accent-lime);
    display: flex;
}

/* Ticket card bubble */
.chat-ticket-card {
    margin-top: 8px;
    background: var(--bg-elevated);
    border: 1.5px solid var(--accent-lime);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.chat-ticket-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.chat-ticket-badge {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--accent-lime);
}
.chat-ticket-tier {
    background: var(--bg-card);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    border-radius: 100px;
}
.chat-ticket-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chat-ticket-event {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
.chat-ticket-venue {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
}
.chat-ticket-price {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}
.chat-ticket-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}
.chat-ticket-view-btn {
    background: var(--accent-lime);
    color: var(--text-on-accent);
    border: none;
    border-radius: 100px;
    padding: 7px 18px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: opacity 0.2s;
}
.chat-ticket-view-btn:hover {
    opacity: 0.85;
}

/* System message */
.chat-system-msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 4px 0;
}
.chat-system-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-muted);
}
.chat-system-bubble {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
    max-width: 85%;
    line-height: 1.5;
}

/* Error toast */
.chat-error-toast {
    position: fixed;
    bottom: 76px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(min(100%, 480px) - 32px);
    max-width: 448px;
    background: var(--danger);
    color: #fff;
    border-radius: 10px;
    padding: 10px 16px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    z-index: 30;
    animation: fadeInUp 0.25s ease;
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Input bar */
.chat-input-bar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--overlay-blur);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    z-index: 20;
}
.chat-input {
    flex: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 10px 16px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}
.chat-input:focus {
    border-color: rgba(79, 107, 255, 0.4);
}
.chat-input::placeholder {
    color: var(--text-muted);
}
.chat-input:disabled {
    opacity: 0.5;
}
.chat-input-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.2s;
}
.chat-input-icon-btn:hover {
    color: var(--text-secondary);
}
.chat-send-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 2px 12px rgba(79, 107, 255, 0.35);
    transition: opacity 0.2s;
}
.chat-send-btn:hover {
    opacity: 0.88;
}
.chat-send-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ══════════════════════════════════════════════════════════════════════════════
   REDESIGN — MESSAGES PAGE
   ══════════════════════════════════════════════════════════════════════════════ */

.msg-page {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--bg-base);
    padding-bottom: 80px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    position: relative;
}

/* Header */
.msg-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 12px;
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg-base);
    border-bottom: 1px solid var(--border-soft);
}
.msg-header-avatar-wrap {
    flex-shrink: 0;
}
.msg-header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent-blue);
}
.msg-avatar--placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 2px solid var(--accent-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}
.msg-header-title {
    flex: 1;
    font-family: var(--font-display);
    font-size: 24px;
    letter-spacing: 1px;
    color: var(--text-primary);
    margin: 0;
}
.msg-icon-btn {
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition:
        color 0.2s,
        background 0.2s;
}
.msg-icon-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

/* Search bar */
.msg-search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px;
}
.msg-search-icon {
    color: var(--text-muted);
    flex-shrink: 0;
}
.msg-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
}
.msg-search-input::placeholder {
    color: var(--text-muted);
}
.msg-search-filter-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    padding: 0;
}

/* Hot Stages — Live Now */
.msg-live-section {
    padding: 0 16px 16px;
}
.msg-live-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 14px;
}
.msg-live-eyebrow {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--accent-lime);
    margin: 0 0 2px;
}
.msg-live-title {
    font-family: var(--font-display);
    font-size: 28px;
    letter-spacing: 1px;
    color: var(--text-primary);
    margin: 0;
}
.msg-live-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--live-green);
    background: rgba(75, 216, 143, 0.08);
    border: 1px solid rgba(75, 216, 143, 0.2);
    border-radius: 100px;
    padding: 4px 10px;
    white-space: nowrap;
}
.msg-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--live-green);
    animation: pulse-dot 1.4s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

.msg-hot-stages-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.msg-hot-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 4/3;
    cursor: pointer;
}
.msg-hot-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.msg-hot-card:hover .msg-hot-card-img {
    transform: scale(1.04);
}
.msg-hot-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 40%, transparent);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 10px;
    gap: 3px;
}
.msg-hot-card-badge {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--accent-lime);
    opacity: 0.9;
}
.msg-hot-card-name {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.5px;
    color: #fff;
    line-height: 1.2;
}

/* Conversations list */
.msg-convos-section {
    padding: 0 16px;
}
.msg-convos-label {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin: 0 0 10px;
}
.msg-convo-list {
    display: flex;
    flex-direction: column;
}
.msg-convo-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-soft);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}
.msg-convo-row:hover {
    background: var(--bg-card);
}
.msg-convo-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.msg-convo-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}
.msg-convo-live-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--live-green);
    border: 2px solid var(--bg-base);
}
.msg-convo-body {
    flex: 1;
    min-width: 0;
}
.msg-convo-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.msg-convo-name {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-convo-time {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.msg-convo-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.msg-convo-preview {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-convo-badge {
    min-width: 20px;
    height: 20px;
    border-radius: 100px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    flex-shrink: 0;
}

/* FAB */
.msg-fab {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent-blue);
    border: none;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(79, 107, 255, 0.45);
    transition:
        transform 0.2s,
        box-shadow 0.2s;
    z-index: 40;
}
.msg-fab:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 28px rgba(79, 107, 255, 0.6);
}

/* ══════════════════════════════════════════════════════════════════════════════
   REDESIGN — CHAT ROOM PAGE
   ══════════════════════════════════════════════════════════════════════════════ */

/* Header */
.chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg-base);
    border-bottom: 1px solid var(--border-soft);
    backdrop-filter: blur(12px);
}
.chat-header-avatar-wrap {
    flex-shrink: 0;
}
.chat-header-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--border-strong);
}
.chat-header-info {
    flex: 1;
    min-width: 0;
}
.chat-header-name {
    display: block;
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-header-sub {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.08em;
}
.chat-status-live {
    color: var(--live-green);
}
.chat-status-connecting {
    color: var(--warning-amber);
}
.chat-header-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.chat-icon-btn {
    width: 34px;
    height: 34px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition:
        background 0.15s,
        color 0.15s;
}
.chat-icon-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

/* Ticket card inside bubble */
.chat-ticket-card {
    margin-top: 8px;
    background: var(--bg-elevated);
    border: 1px solid rgba(166, 217, 106, 0.3);
    border-left: 3px solid var(--accent-lime);
    border-radius: 12px;
    overflow: hidden;
}
.chat-ticket-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px 6px;
    border-bottom: 1px solid var(--border-soft);
}
.chat-ticket-badge {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--accent-lime);
    font-weight: 700;
}
.chat-ticket-tier {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-secondary);
    background: var(--bg-card);
    border-radius: 100px;
    padding: 2px 8px;
}
.chat-ticket-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    gap: 10px;
}
.chat-ticket-event {
    font-family: var(--font-display);
    font-size: 15px;
    color: var(--text-primary);
    margin: 0 0 2px;
}
.chat-ticket-venue {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-secondary);
    margin: 0 0 6px;
}
.chat-ticket-price {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--text-primary);
    margin: 0;
}
.chat-ticket-view-btn {
    background: var(--accent-lime);
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s;
}
.chat-ticket-view-btn:hover {
    opacity: 0.85;
}

/* Message meta (time + sent checkmark) */
.chat-msg-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}
.chat-msg-time {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
}
.chat-msg-sent-icon {
    color: var(--accent-blue);
    display: flex;
}

/* Input bar — emoji + attach + camera + send */
/* chat-input-bar defined below */
.chat-input-icon-btn {
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition:
        color 0.15s,
        background 0.15s;
}
.chat-input-icon-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}
.chat-input {
    flex: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 10px 16px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}
.chat-input:focus {
    border-color: var(--accent-blue);
}
.chat-input::placeholder {
    color: var(--text-muted);
}
.chat-input:disabled {
    opacity: 0.5;
}
.chat-send-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--accent-blue);
    border: none;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition:
        opacity 0.2s,
        transform 0.2s;
}
.chat-send-btn:hover:not(:disabled) {
    opacity: 0.85;
    transform: scale(1.05);
}
.chat-send-btn:disabled {
    background: var(--bg-elevated-2);
    cursor: not-allowed;
}

/* bubble-text inside ticket card wrapper */
.chat-bubble-text {
    margin: 0 0 8px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   STORIES SECTION (IG-style) — di atas list messages
   ══════════════════════════════════════════════════════════════════════════════ */

.msg-stories-section {
    padding: 14px 0 12px;
    border-bottom: 1px solid var(--border-soft);
}

.msg-stories-scroll {
    display: flex;
    gap: 18px;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.msg-stories-scroll::-webkit-scrollbar { display: none; }

/* ── Story item ─────────────────────────────────────────────────────────── */
.msg-story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    cursor: pointer;
    text-decoration: none;
    width: 64px;
}

/* Avatar ring wrapper — gradient for unseen, gray for seen */
.msg-story-avatar-wrap {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    padding: 2.5px;
    background: var(--border-soft);   /* default: seen */
    flex-shrink: 0;
}

/* Unseen — Instagram gradient ring */
.msg-story-item--unseen .msg-story-avatar-wrap {
    background: conic-gradient(
        from 180deg,
        #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%
    );
}

/* Live — lime green ring + pulse */
.msg-story-item--live .msg-story-avatar-wrap {
    background: var(--accent-lime);
    animation: story-live-pulse 2s ease-in-out infinite;
}
@keyframes story-live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(166, 217, 106, 0.45); }
    50%      { box-shadow: 0 0 0 5px rgba(166, 217, 106, 0); }
}

/* My story — dashed border via outline trick */
.msg-story-item--mine .msg-story-avatar-wrap {
    background: var(--bg-elevated);
    border: 2px dashed var(--border-strong);
    padding: 1px;
}

/* Avatar image */
.msg-story-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid var(--bg-base);
    display: block;
}

/* Add-story + button */
.msg-story-add-btn {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-lime);
    cursor: pointer;
    transition: background 0.2s;
}
.msg-story-add-btn:hover { background: var(--bg-card); }

/* LIVE badge sits on avatar bottom-center */
.msg-story-live-badge {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-lime);
    color: #0a0a14;
    font-family: var(--font-body);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border-radius: 4px;
    border: 2px solid var(--bg-base);
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

/* Label under avatar */
.msg-story-label {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-secondary);
    width: 64px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
.msg-story-item--unseen .msg-story-label {
    font-weight: 700;
    color: var(--text-primary);
}
.msg-story-item--live .msg-story-label {
    font-weight: 700;
    color: var(--accent-lime);
}
.msg-story-item--seen .msg-story-label {
    color: var(--text-muted);
}

/* ── Light mode overrides ────────────────────────────────────────────────── */
[data-theme="light"] .msg-stories-section { border-bottom-color: rgba(0,0,0,0.08); }
[data-theme="light"] .msg-story-avatar { border-color: #f5f5f7; }
[data-theme="light"] .msg-story-live-badge { border-color: #f5f5f7; }
[data-theme="light"] .msg-story-item--mine .msg-story-avatar-wrap { background: #e8e8ed; border-color: #bbb; }
[data-theme="light"] .msg-story-add-btn { background: #e8e8ed; color: #3d6600; }
[data-theme="light"] .msg-story-label { color: #555; }
[data-theme="light"] .msg-story-item--unseen .msg-story-label { color: #111; }
[data-theme="light"] .msg-story-item--seen .msg-story-label { color: #999; }


/* ── /stories — arsip publik semua story ───────────────────────────────────── */
.sarc-hero {
    padding: 18px 20px 6px;
}
.sarc-title {
    font-family: var(--font-display);
    font-size: 32px;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    line-height: 1.05;
}
.sarc-sub {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 6px;
    line-height: 1.5;
}
.sarc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 14px 16px 20px;
}
.sarc-shim-card {
    aspect-ratio: 9 / 14;
    border-radius: 14px;
}
.sarc-card {
    position: relative;
    aspect-ratio: 9 / 14;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    background: var(--bg-elevated);
    padding: 0;
    cursor: pointer;
    text-align: left;
}
.sarc-card-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sarc-card-grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.72) 100%);
}
.sarc-play-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
}
/* Jumlah story milik user (kartu /stories per-user) — kanan-bawah agar tidak
   bertumpuk dengan play badge (kiri-atas), AKTIF (kanan-atas), dan info user
   (kiri-bawah). */
.sarc-count-badge {
    position: absolute;
    bottom: 34px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    z-index: 1;
}
.sarc-live-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-family: var(--font-body);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    border-radius: 100px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
}
.sarc-card-info {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.sarc-card-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    flex-shrink: 0;
}
.sarc-card-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.sarc-card-user {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sarc-card-date {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.75);
}
.sarc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 24px;
    gap: 6px;
}
.sarc-empty-icon {
    font-size: 2.4rem;
    margin-bottom: 4px;
}
.sarc-empty-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}
.sarc-empty-sub {
    font-size: 12px;
    color: var(--text-secondary);
}
.sarc-empty-cta {
    margin-top: 14px;
    padding: 11px 22px;
    border-radius: 100px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
}
.sarc-more-wrap {
    display: flex;
    justify-content: center;
    padding: 0 16px 28px;
}
.sarc-more-btn {
    padding: 12px 26px;
    border-radius: 100px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
}
.sarc-more-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.sarc-lightbox {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(10px);
}
.sarc-lb-inner {
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 14px;
}
.sarc-lb-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sarc-lb-head .sarc-card-user,
.sarc-lb-head .sarc-card-date {
    color: var(--text-primary);
}
.sarc-lb-head .sarc-card-date {
    color: var(--text-muted);
}
.sarc-lb-close {
    margin-left: auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
}
.sarc-lb-media {
    width: 100%;
    max-height: 64vh;
    object-fit: contain;
    border-radius: 12px;
    background: #000;
}
.sarc-lb-event {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 8px 14px;
    border-radius: 100px;
    background: rgba(79, 107, 255, 0.12);
    border: 1px solid rgba(79, 107, 255, 0.25);
    color: var(--accent-blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-decoration: none;
}
/* ==== notifications.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   NOTIFICATIONS PAGE — List + Empty State
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page shell ────────────────────────────────────────────────────────── */
.page {
    min-height: 100dvh;
    background: var(--bg-page);
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    position: relative;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 12px));
    color: var(--text-primary);
    font-family: var(--font-body);
}

/* ── Header: notif page gunakan grid agar title bisa center ───────────── */
.notif-page .page-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    overflow: hidden;
}

.notif-page .page-logo {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin: 0;
    text-align: center;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    justify-self: center;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: end;
}

.nav-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bg-elevated-2, rgba(255,255,255,0.08));
    border: 1.5px solid var(--border, rgba(255,255,255,0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    flex-shrink: 0;
    text-decoration: none;
}

/* ── Empty State ───────────────────────────────────────────────────────── */
.notif-empty-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    text-align: center;
    gap: 20px;
}

.notif-empty-icon-wrap {
    position: relative;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.notif-empty-bell-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, rgba(166, 217, 106,0.12), rgba(166, 217, 106,0.03) 60%, transparent 70%);
    border: 1px solid rgba(166, 217, 106,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-lime);
    position: relative;
}

.notif-empty-bell-dot {
    position: absolute;
    bottom: 28px;
    right: 28px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent-lime);
    border: 3px solid var(--bg-page);
    opacity: 0;
    animation: pulseDot 2s ease-in-out infinite;
}

.notif-empty-title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}

.notif-empty-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 100%;
    margin: 0;
}

.notif-empty-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    padding: 14px 28px;
    border-radius: 100px;
    background: linear-gradient(135deg, var(--accent-info), var(--accent-blue));
    color: var(--text-on-accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
    box-shadow: 0 4px 20px rgba(125,167,255,0.25);
}
.notif-empty-cta:hover { transform: translateY(-1px); opacity: 0.95; }
.notif-empty-cta:active { transform: scale(0.98); }

.notif-empty-tips {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    margin-top: 16px;
}

.notif-empty-tip {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 10px;
    border-radius: 14px;
    background: var(--bg-elevated, rgba(255,255,255,0.04));
    border: 1px solid var(--border-soft);
    text-align: left;
}

.notif-empty-tip-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(166, 217, 106,0.08);
    border: 1px solid rgba(166, 217, 106,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-lime);
    flex-shrink: 0;
}

.notif-empty-tip-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notif-empty-tip-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}

.notif-empty-tip-sub {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ── Notification List ───────────────────────────────────────────────────── */
.notif-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    width: 100%;
}

.notif-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 8px;
}

.notif-section-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0 4px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Mark all as read link (jika nanti ditambahkan) */
.notif-section-label a,
.notif-section-label button {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-lime);
    background: none;
    border: none;
    cursor: pointer;
    letter-spacing: 0.02em;
    text-transform: none;
}

/* ── Notification Card ──────────────────────────────────────────────────── */
.notif-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border-radius: 20px;
    background: var(--bg-elevated, rgba(255,255,255,0.04));
    border: 1px solid var(--border-soft);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
    position: relative;
    overflow: hidden;
    width: 100%;
    min-width: 0;
}
.notif-card:hover {
    background: var(--bg-card, rgba(255,255,255,0.06));
    border-color: rgba(255,255,255,0.1);
    transform: translateY(-1px);
}

/* Left accent strip */
.notif-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: transparent;
}
.notif-card:has(.notif-icon--success)::before { background: var(--accent-lime); }
.notif-card:has(.notif-icon--promo)::before   { background: var(--accent-promo); }
.notif-card:has(.notif-icon--artist)::before  { background: var(--accent-pink); }
.notif-card:has(.notif-icon--alert)::before   { background: var(--accent-info); }

.notif-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
}
.notif-icon--success { background: rgba(166, 217, 106,0.1); border-color: rgba(166, 217, 106,0.18); color: var(--accent-lime); }
.notif-icon--promo   { background: rgba(183,140,255,0.1); border-color: rgba(183,140,255,0.18); color: var(--accent-promo); }
.notif-icon--artist  { background: rgba(255,107,157,0.1); border-color: rgba(255,107,157,0.18); color: var(--accent-pink); }
.notif-icon--alert   { background: rgba(125,167,255,0.1); border-color: rgba(125,167,255,0.18); color: var(--accent-info); }

.notif-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-pink), var(--accent-promo));
    border: 2px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}

.notif-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.notif-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.notif-title {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.notif-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex-shrink: 0;
    white-space: nowrap;
}
.notif-pill--live {
    background: rgba(166, 217, 106,0.12);
    color: var(--accent-lime);
    border: 1px solid rgba(166, 217, 106,0.2);
}
.notif-pill--promo {
    background: rgba(183,140,255,0.12);
    color: var(--accent-promo);
    border: 1px solid rgba(183,140,255,0.2);
}
.notif-pill--new {
    background: rgba(125,167,255,0.12);
    color: var(--accent-info);
    border: 1px solid rgba(125,167,255,0.2);
}

.pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-lime);
    animation: pulseDot 1.8s ease-in-out infinite;
}

.notif-time {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    flex-shrink: 0;
    white-space: nowrap;
}

.notif-body {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
    word-wrap: break-word;
}
.notif-body strong {
    color: var(--text-primary);
    font-weight: 700;
}

.notif-amount {
    color: var(--accent-lime);
    font-weight: 700;
}

.notif-highlight {
    color: var(--text-primary);
    font-weight: 700;
}

.notif-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.notif-cta {
    align-self: flex-start;
    margin-top: 4px;
    padding: 8px 16px;
    border-radius: 10px;
    background: var(--accent-lime);
    color: #0a0a14;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
}
.notif-cta:hover { opacity: 0.9; }
.notif-cta:active { transform: scale(0.97); }

/* ── Keyframes ───────────────────────────────────────────────────────────── */
@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

/* ── Light mode overrides ────────────────────────────────────────────────── */
[data-theme="light"] .page { background: var(--bg-page); color: var(--text-primary); }
[data-theme="light"] .page-header { background: var(--bg-page); border-color: var(--border); }
[data-theme="light"] .back-btn { background: var(--bg-elevated); border-color: var(--border); color: var(--text-primary); }
[data-theme="light"] .page-logo { color: var(--text-primary); }
[data-theme="light"] .nav-avatar { background: var(--bg-elevated); border-color: var(--border); color: var(--text-secondary); }
[data-theme="light"] .notif-card { background: var(--bg-card); border-color: var(--border); }
[data-theme="light"] .notif-card:hover { background: var(--bg-card-hover); border-color: var(--border-strong); }
[data-theme="light"] .notif-title { color: var(--text-secondary); }
[data-theme="light"] .notif-body { color: var(--text-secondary); }
[data-theme="light"] .notif-body strong { color: var(--text-primary); }
[data-theme="light"] .notif-time { color: var(--text-muted); }
[data-theme="light"] .notif-empty-title { color: var(--text-primary); }
[data-theme="light"] .notif-empty-body { color: var(--text-secondary); }
[data-theme="light"] .notif-empty-tip { background: var(--bg-card); border-color: var(--border); }
[data-theme="light"] .notif-empty-tip-title { color: var(--text-primary); }
[data-theme="light"] .notif-empty-tip-sub { color: var(--text-secondary); }
[data-theme="light"] .notif-empty-bell-circle { background: radial-gradient(circle at 50% 40%, rgba(var(--accent-lime-rgb, 61,102,0), 0.08), transparent 70%); border-color: var(--border); }
[data-theme="light"] .notif-cta { background: var(--accent-lime); color: #fff; }
[data-theme="light"] .notif-cta:hover { background: var(--accent-blue); opacity: 1; }

/* ==== page-admin.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   ADMIN PAGE
   Auto-extracted from styles.css — edit this file for page-specific styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ── ADMIN DESIGN SYSTEM ──────────────────────────────────────────────────── */

/* Add button — lime accent consistent with app */
.admin-add-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0.35rem 0.85rem;
    border-radius: 100px;
    border: none;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: opacity 0.15s;
}
.admin-add-btn:hover {
    opacity: 0.85;
}

/* Toast — dark-theme aware */
.admin-toast {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    margin-bottom: 0.75rem;
    font-family: var(--font-body);
    font-size: 0.78rem;
    backdrop-filter: blur(12px);
}
.admin-toast--ok {
    background: rgba(75, 216, 143, 0.12);
    color: var(--live-green);
    border: 1px solid rgba(75, 216, 143, 0.25);
}
.admin-toast--err {
    background: rgba(255, 79, 107, 0.12);
    color: var(--danger);
    border: 1px solid rgba(255, 79, 107, 0.25);
}
.admin-toast-x {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: inherit;
    padding: 0 4px;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.admin-toast-x:hover {
    opacity: 1;
}

/* Banner list rows */
.admin-banner-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 0.8rem;
    margin-bottom: 0.65rem;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}
.admin-banner-row:hover {
    border-color: rgba(166, 217, 106, 0.18);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
.admin-banner-thumb {
    position: relative;
    width: 90px;
    height: 58px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-soft);
}
.admin-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.admin-banner-no-img {
    font-size: 1.6rem;
    opacity: 0.5;
}
.admin-banner-badge {
    position: absolute;
    top: 3px;
    left: 3px;
    font-size: 0.5rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
    font-family: var(--font-body);
    letter-spacing: 0.05em;
}
.admin-banner-badge--on {
    background: rgba(75, 216, 143, 0.25);
    color: var(--live-green);
}
.admin-banner-badge--off {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
}
.admin-banner-info {
    flex: 1;
    min-width: 0;
}
.admin-banner-title {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-banner-sub {
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin: 0.1rem 0;
}
.admin-banner-link {
    font-size: 0.68rem;
    color: var(--accent-lime);
    display: flex;
    align-items: center;
    gap: 3px;
    margin: 0.15rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.8;
}
.admin-banner-order {
    font-size: 0.68rem;
    color: var(--text-muted);
    margin: 0.1rem 0;
}
.admin-banner-actions {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex-shrink: 0;
}
.admin-del-btn {
    padding: 0.35rem 0.65rem;
    border-radius: 9px;
    border: none;
    background: rgba(255, 79, 107, 0.12);
    color: var(--danger);
    font-size: 0.82rem;
    cursor: pointer;
    transition:
        opacity 0.15s,
        background 0.15s;
}
.admin-del-btn:hover {
    background: rgba(255, 79, 107, 0.2);
}
.admin-del-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Modal backdrop */
.admin-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: admin-fadein 0.18s ease;
}
@keyframes admin-fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal panel — bottom sheet sitting ABOVE the bottom nav */
.admin-modal-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: 24px 24px 0 0;
    width: 100%;
    max-width: 480px;
    /* 92dvh minus bottom-nav height (~72px) so submit btn is always reachable */
    max-height: calc(92dvh - 72px);
    /* Lift the sheet above the bottom nav */
    margin-bottom: 72px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.4rem 1.1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    animation: admin-slideup 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes admin-slideup {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Drag handle pill */
.admin-modal-panel::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    background: var(--border-strong);
    border-radius: 2px;
    margin: 0 auto 1.2rem;
}

/* Modal header */
.admin-modal-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.1rem;
}
.admin-modal-ttl {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    margin: 0;
}
.admin-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.15s,
        color 0.15s;
}
.admin-modal-close:hover {
    background: var(--bg-elevated-2);
    color: var(--text-primary);
}

/* Image preview box */
.admin-preview-box {
    position: relative;
    min-height: 100px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-elevated);
    border: 1px dashed rgba(166, 217, 106, 0.25);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s;
}
.admin-preview-box:hover {
    border-color: rgba(166, 217, 106, 0.45);
}
.admin-preview-img {
    width: 100%;
    max-height: 170px;
    object-fit: cover;
    display: block;
}
.admin-preview-ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-family: var(--font-body);
    padding: 1.5rem;
}
.admin-upload-lbl {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0.38rem 0.8rem;
    border-radius: 100px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: opacity 0.15s;
}
.admin-upload-lbl:hover {
    opacity: 0.85;
}

/* Form inside modal */
.admin-modal-form {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.admin-form-row2 {
    display: flex;
    gap: 0.75rem;
}
.admin-form-err {
    background: rgba(255, 79, 107, 0.1);
    border: 1px solid rgba(255, 79, 107, 0.2);
    border-radius: 10px;
    padding: 0.55rem 0.8rem;
    color: var(--danger);
    font-family: var(--font-body);
    font-size: 0.78rem;
    margin: 0.1rem 0;
}

/* Submit button — ensure visibility inside modal */
.admin-modal-panel .mhub-modal-submit {
    width: 100%;
    margin-top: 16px;
    padding: 14px 28px;
    display: block;
    /* force visibility even if parent has dark bg */
    background: var(--accent-lime) !important;
    color: var(--text-on-accent) !important;
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: opacity 0.2s;
    position: relative;
    z-index: 1;
}
.admin-modal-panel .mhub-modal-submit:hover {
    opacity: 0.88;
}
.admin-modal-panel .mhub-modal-submit:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ==== page-auth.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   AUTH PAGES (Login, Register, OTP, Forgot)
   Auto-extracted from styles.css — edit this file for page-specific styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ── AUTH PAGES ─────────────────────────────────────────────────────────────── */
.auth-page {
    position: relative;
    z-index: 1;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    max-width: 480px;
    margin: 0 auto;
    padding: 24px 20px 40px;
    gap: 28px;
}
.auth-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header-badge {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--accent-lime);
    background: rgba(166, 217, 106, 0.1);
    border: 1px solid rgba(166, 217, 106, 0.25);
    padding: 4px 10px;
    border-radius: 100px;
}
.back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-primary);
    text-decoration: none;
    flex-shrink: 0;
}
.auth-logo {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 3px;
    color: var(--text-primary);
}
.hero-title {
    font-family: var(--font-display);
    font-size: clamp(44px, 13vw, 68px);
    color: var(--text-primary);
    letter-spacing: 0.04em;
    line-height: 1;
    margin-bottom: 10px;
}
.hero-sub {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}
.auth-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 28px 24px;
    backdrop-filter: blur(20px);
}
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.form-row {
    display: flex;
    justify-content: flex-end;
}
.forgot-link {
    font-size: 11px;
    color: var(--text-secondary);
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: color 0.2s;
}
.forgot-link:hover {
    color: var(--accent-lime);
}
.submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
    color: white;
    border: none;
    border-radius: 12px;
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition:
        opacity 0.2s,
        transform 0.2s;
    margin-top: 4px;
}
.submit-btn:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 8px 32px rgba(79, 107, 255, 0.4);
}
.submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.btn-loading {
    display: flex;
    align-items: center;
    gap: 12px;
}
.divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0;
}
.divider::before,
.divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-strong);
}
.divider-text {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    letter-spacing: 0.06em;
}
.social-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    cursor: pointer;
    transition:
        background 0.2s,
        border-color 0.2s;
}
.social-btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--social-btn-border-hover);
}
.auth-prompt {
    text-align: center;
    margin-top: 20px;
    font-size: 12px;
    color: var(--text-muted);
}
.auth-prompt-link {
    color: var(--accent-lime);
    text-decoration: none;
    transition: opacity 0.2s;
}
.trust-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}

/* ── FORGOT PASSWORD SUCCESS ───────────────────────────────────────────────── */
.success-card {
    background: var(--bg-surface);
    border: 1px solid rgba(166, 217, 106, 0.2);
    border-radius: 24px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}
.success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(166, 217, 106, 0.08);
    border: 1px solid rgba(166, 217, 106, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.success-title {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--text-primary);
    letter-spacing: 0.06em;
}
.success-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.7;
}
.success-text strong {
    color: var(--text-primary);
}
.back-login-btn {
    padding: 14px 32px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
    color: white;
    border: none;
    border-radius: 12px;
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.1em;
    margin-top: 8px;
}

/* ── OTP VERIFICATION PAGE ──────────────────────────────────────────────────── */
.verify-page {
    gap: 24px;
}
.verify-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.verify-title-mini {
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}
.verify-headline {
    line-height: 1.05;
}
.verify-headline-accent {
    color: var(--text-soft-accent);
}

.verify-card {
    padding: 28px 22px;
}
.verify-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.otp-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    padding: 6px 0 4px;
}
.otp-cell {
    width: 100%;
    aspect-ratio: 1 / 1.05;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(22px, 6vw, 30px);
    color: var(--text-primary);
    caret-color: var(--accent-blue);
    outline: none;
    transition:
        border-color 0.2s,
        box-shadow 0.2s,
        transform 0.15s;
}
.otp-cell:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(79, 107, 255, 0.18);
    transform: translateY(-1px);
}
.otp-cell:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.verify-submit {
    margin-top: 6px;
}

.resend-row {
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}
.resend-link {
    background: none;
    border: none;
    padding: 0 4px;
    font: inherit;
    color: var(--accent-lime);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    letter-spacing: 0.02em;
}
.resend-link:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
    text-decoration: none;
}

.verify-meta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 4px;
}
.verify-meta-card {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
}
.verify-meta-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.verify-meta-icon--expiry {
    background: rgba(166, 217, 106, 0.12);
    color: var(--accent-lime);
}
.verify-meta-icon--sent {
    background: rgba(124, 79, 255, 0.16);
    color: var(--text-soft-accent);
}
.verify-meta-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.verify-meta-label {
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    text-transform: uppercase;
}
.verify-meta-value {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 360px) {
    .otp-row {
        gap: 6px;
    }
    .otp-cell {
        border-radius: 12px;
    }
}

/* ==== page-cart.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   CART & CHECKOUT PAGES
   Auto-extracted from styles.css — edit this file for page-specific styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ── CART ───────────────────────────────────────────────────────────────────── */
/* Higher specificity to win over .page rule cascade conflicts */
.page.cart-page {
    padding-bottom: 160px;
}

.cart-title-wrap {
    padding: 24px 20px 0;
}
.cart-title {
    font-family: var(--font-display);
    font-size: 56px;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 8px;
}
.cart-sub {
    font-size: 13px;
    color: var(--text-secondary);
}
.empty-cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 20px;
    color: var(--text-muted);
    font-size: 14px;
}
.browse-btn {
    padding: 13px 28px;
    min-height: 44px;
    background: var(--color-primary);
    color: var(--color-primary-text);
    border-radius: 100px;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 0.08em;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    transition: opacity 0.15s, transform 0.1s;
}
.browse-btn:hover { opacity: 0.9; }
.browse-btn:active { transform: scale(0.97); }
.cart-items {
    padding: 24px 20px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cart-item {
    display: flex;
    gap: 14px;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 16px;
}
.item-img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 12px;
    flex-shrink: 0;
}
.item-info {
    flex: 1;
    min-width: 0;
}
.item-event {
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.item-tier {
    font-size: 11px;
    color: var(--text-secondary);
    margin: 2px 0;
}
.item-venue {
    font-size: 10px;
    color: var(--text-muted);
}
.item-price {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-primary);
    margin-top: 4px;
    font-weight: 700;
}
.item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}
.item-remove {
    background: rgba(255, 79, 107, 0.1);
    border: 1px solid rgba(255, 79, 107, 0.2);
    border-radius: 8px;
    padding: 10px;
    min-width: 40px;
    min-height: 40px;
    color: var(--danger);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}
.item-remove:hover {
    background: rgba(255, 79, 107, 0.18);
    border-color: rgba(255, 79, 107, 0.35);
}
.item-qty-ctrl {
    display: flex;
    align-items: center;
    gap: 0;
}
.iq-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, opacity 0.15s;
    flex-shrink: 0;
}
.iq-btn:active { opacity: 0.7; }
.iq-btn--add {
    background: var(--color-primary);
    color: var(--color-primary-text);
}
.iq-val {
    width: 32px;
    text-align: center;
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--text-primary);
}
.item-subtotal {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 700;
}
.summary-card {
    margin: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 20px;
}
.summary-title {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.12em;
    margin-bottom: 14px;
}
.summary-line {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.summary-line-val {
    color: var(--text-primary);
}
.summary-divider {
    height: 1px;
    background: var(--border);
    margin: 14px 0;
}
.summary-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.summary-total-label {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.08em;
}
.summary-total-val {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--color-primary);
}
.cart-footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    background: var(--overlay-blur);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    padding: 14px 20px calc(22px + env(safe-area-inset-bottom, 8px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    z-index: 50;
}
.footer-left {
    flex: 1;
    min-width: 0;
}
.footer-meta-label {
    display: block;
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.12em;
    margin-bottom: 2px;
}
.footer-meta-desc {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.footer-total-label {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.12em;
}
.footer-total {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--color-primary);
}
.proceed-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    min-height: 44px;
    background: var(--color-primary);
    color: var(--color-primary-text);
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.08em;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s, transform 0.1s;
}
.proceed-btn:hover { opacity: 0.9; }
.proceed-btn:active { transform: scale(0.97); }
.proceed-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* ── CHECKOUT ───────────────────────────────────────────────────────────────── */
.checkout-hero {
    padding: 24px 20px 0;
}
.checkout-title {
    font-family: var(--font-display);
    font-size: 60px;
    color: var(--text-soft-accent);
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
.checkout-sub {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.65;
    word-break: break-word;
}
.checkout-section {
    padding: 24px 20px 0;
}
.section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.section-head {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-primary);
    letter-spacing: 0.1em;
    font-weight: 700;
}
.section-badge {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--color-primary);
    letter-spacing: 0.1em;
}
.order-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.order-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 16px;
}
.order-item-img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}
.order-item-info {
    flex: 1;
    min-width: 0;
}
.order-item-name {
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    line-height: 1.3;
    word-break: break-word;
}
.order-item-meta {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
    line-height: 1.5;
}
.order-item-qty {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 3px;
}
.order-item-price {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-primary);
    flex-shrink: 0;
    font-weight: 700;
}
.empty-msg {
    font-size: 13px;
    color: var(--text-secondary);
}
.method-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}
.method-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    cursor: pointer;
    text-align: left;
    transition:
        border-color 0.2s,
        background 0.2s;
    width: 100%;
    color: var(--text-primary);
}
.method-card--active {
    border-color: var(--color-primary-border);
    background: var(--color-primary-soft);
}
.method-icon {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.method-info {
    flex: 1;
}
.method-label {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: 0.06em;
}
.method-sub {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}
.method-check {
    width: 22px;
    height: 22px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.promo-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.promo-label {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-secondary);
    letter-spacing: 0.1em;
}
.promo-input-row {
    display: flex;
    gap: 8px;
}
.promo-input {
    flex: 1;
    background: var(--bg-page);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 12px;
    padding: 10px 12px;
    outline: none;
    letter-spacing: 0.06em;
}
.promo-apply-btn {
    padding: 10px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.08em;
    cursor: pointer;
    white-space: nowrap;
}
.promo-apply-btn:disabled {
    opacity: 0.4;
}
.promo-error {
    font-size: 11px;
    color: var(--danger);
    margin-top: 8px;
}
.promo-success {
    font-size: 11px;
    color: var(--live-green);
    margin-top: 8px;
}
.total-section {
    margin-top: 4px;
}
.total-head {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 14px;
}
.total-line {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.total-line--discount span {
    color: var(--live-green);
}
.total-final-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    margin-top: 6px;
    border-top: 1px solid var(--border);
}
.total-final-label {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: 0.08em;
}
.total-final-amt {
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--color-primary);
}
.confirm-section {
    padding: 24px 20px;
}
.pay-error {
    background: rgba(255, 79, 107, 0.1);
    border: 1px solid rgba(255, 79, 107, 0.2);
    border-radius: 8px;
    padding: 12px;
    color: var(--danger);
    font-size: 12px;
    margin-bottom: 12px;
}
.confirm-btn {
    width: 100%;
    padding: 16px;
    background: var(--color-primary);
    color: var(--color-primary-text);
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: 0.08em;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: opacity 0.2s;
    box-shadow: 0 4px 20px var(--color-primary-glow);
}
.confirm-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.terms-note {
    text-align: center;
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    margin-top: 12px;
    line-height: 1.6;
}
.trust-icons {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 14px;
}
.pay-bar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    background: var(--overlay-blur);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    padding: 14px 20px 28px;
    z-index: 50;
}
.pay-bar-btn {
    width: 100%;
    padding: 16px;
    background: var(--color-primary);
    color: var(--color-primary-text);
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: 0.06em;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
    box-shadow: 0 4px 20px var(--color-primary-glow);
}
.pay-bar-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


/* ── Checkout: panel sukses pasca-bayar (data dari response API) ───────────── */
.co-done-overlay {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(5, 8, 20, 0.72);
    backdrop-filter: blur(12px);
    animation: coDoneFade 0.25s ease;
}
@keyframes coDoneFade {
    from { opacity: 0; }
    to { opacity: 1; }
}
.co-done-card {
    width: 100%;
    max-width: 400px;
    max-height: 86vh;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 28px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: coDonePop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes coDonePop {
    from { transform: translateY(16px) scale(0.97); opacity: 0; }
    to { transform: none; opacity: 1; }
}
.co-done-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(79, 107, 255, 0.14);
    color: var(--accent-blue);
}
.co-done-icon--paid {
    background: rgba(166, 217, 106, 0.14);
    color: var(--accent-lime);
}
.co-done-title {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 0.04em;
    text-align: center;
    color: var(--text-primary);
}
.co-done-sub {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
    text-align: center;
    margin-top: -6px;
}
.co-done-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}
.co-done-code {
    color: var(--text-primary);
    font-weight: 700;
}
.co-done-status {
    color: var(--accent-blue);
    font-weight: 700;
    letter-spacing: 0.08em;
}
.co-done-status--paid {
    color: var(--accent-lime);
}
.co-done-items {
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.co-done-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}
.co-done-item span:last-child {
    white-space: nowrap;
    color: var(--text-primary);
}
.co-done-total {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 700;
}
.co-done-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    border-radius: 100px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-decoration: none;
}
.co-done-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: 100px;
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 12px;
    text-decoration: none;
}
/* ==== page-event-detail.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   EVENT DETAIL PAGE
   Auto-extracted from styles.css — edit this file for page-specific styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero badges (LIVE NOW + kategori) ─────────────────────────────────────── */
.ed-hero-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.ed-live-badge {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    padding: 4px 10px;
    border-radius: 100px;
    background: var(--live-green);
    color: var(--bg-base);
    display: flex;
    align-items: center;
    gap: 5px;
}
.ed-live-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--bg-base);
    animation: pulse 1.5s infinite;
}
/* Badge LIVE yang bisa diklik → loncat ke pemutar siaran */
.ed-live-badge--link {
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
}
.ed-live-badge--link:hover { opacity: 0.9; }
.ed-live-badge--link:active { transform: scale(0.95); }
/* Offset agar judul section tak tertutup header saat di-scroll ke anchor */
.ed-live-section { scroll-margin-top: 72px; }
.ed-cat-badge {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 4px 10px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* ── Hero meta row (tanggal + venue) ────────────────────────────────────────── */
.ed-hero-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 0;
}
.ed-hero-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
}
.ed-hero-meta-item svg {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.55);
}

/* ── Section eyebrow label ──────────────────────────────────────────────────── */
.ed-section-eyebrow {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* ── Categories section ─────────────────────────────────────────────────────── */
.ed-categories-section {
    padding: 18px 20px 0;
}
.ed-chips-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ed-chip {
    font-family: var(--font-body);
    font-size: 11px;
    padding: 6px 14px;
    border-radius: 100px;
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
    background: transparent;
    cursor: pointer;
    transition:
        background 0.15s,
        color 0.15s;
}
.ed-chip:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

/* ── Select Tickets header ──────────────────────────────────────────────────── */
.ed-tickets-header {
    padding: 26px 20px 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.ed-tickets-title {
    font-family: var(--font-display);
    font-size: 26px;
    letter-spacing: 0.04em;
    color: var(--text-primary);
}
.ed-tickets-avail {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.08em;
}

/* ── Tier Add button ─────────────────────────────────────────────────────────── */
.tier-add-btn {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 10px 22px;
    border-radius: 100px;
    background: var(--color-primary);
    color: var(--color-primary-text);
    border: none;
    cursor: pointer;
    transition:
        opacity 0.15s,
        transform 0.1s;
    flex-shrink: 0;
}
.tier-add-btn:hover {
    opacity: 0.9;
}
.tier-add-btn:active {
    transform: scale(0.97);
}

/* ── Footer: STARTING FROM + Secure Tickets ────────────────────────────────── */
.ed-footer-starting {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* .starting-price already defined, reuse var(--accent-lime) color from tokens */

.ed-secure-btn {
    padding: 14px 26px;
    background: var(--color-primary);
    color: var(--color-primary-text);
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    flex-shrink: 0;
    transition:
        opacity 0.15s,
        transform 0.1s;
    white-space: nowrap;
    box-shadow: 0 4px 16px var(--color-primary-glow);
}
.ed-secure-btn:hover {
    opacity: 0.9;
}
.ed-secure-btn:active {
    transform: scale(0.97);
}
.ed-secure-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* ── Footer cart qty badge (shown instead of starting-price when cart has items) */
.footer-cart-qty {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--color-primary);
    line-height: 1;
}

/* ── Light mode overrides ────────────────────────────────────────────────────── */
[data-theme="light"] .ed-cat-badge {
    background: rgba(0, 0, 20, 0.08);
    color: var(--text-primary);
    border-color: rgba(0, 0, 20, 0.14);
}
[data-theme="light"] .ed-chip {
    border-color: var(--border-strong);
}

.detail-hero {
    position: relative;
    height: 280px;
    overflow: hidden;
}
.detail-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, var(--bg-page) 100%);
}
.event-intro {
    padding: 0 20px 20px;
}
.event-badge {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--accent-lime);
    letter-spacing: 0.12em;
    display: block;
    margin-bottom: 8px;
}
.event-title {
    font-family: var(--font-display);
    font-size: 52px;
    color: white;
    line-height: 1;
    margin-bottom: 16px;
    letter-spacing: 0.02em;
}
.event-subtitle {
    color: var(--text-soft-accent);
}
.starting-from {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.starting-label {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-secondary);
    letter-spacing: 0.12em;
}
.starting-price {
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--color-primary);
    line-height: 1;
}
.info-section {
    padding: 0 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.info-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.info-label {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.12em;
}
.info-val {
    font-size: 14px;
    color: var(--text-primary);
}
.access-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
    color: white;
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    margin-top: 12px;
}
.access-btn:hover {
    opacity: 0.92;
}
.section {
    padding: 0 20px 28px;
}
.lineup-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.artist-card {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 1;
}
.artist-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(0.2);
}
.artist-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}
.artist-role {
    display: block;
    font-family: var(--font-body);
    font-size: 8px;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.1em;
}
.artist-name {
    display: block;
    font-family: var(--font-display);
    font-size: 14px;
    color: white;
    letter-spacing: 0.06em;
}
.about-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.8;
}
.map-card {
    margin: 0 20px 28px;
    border-radius: 24px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
}
.map-visual {
    height: 140px;
    background: var(--bg-card-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.map-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--map-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--map-grid) 1px, transparent 1px);
    background-size: 32px 32px;
}
.map-pin {
    position: relative;
    z-index: 1;
}
.map-info {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.map-name {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text-primary);
}
.map-addr {
    font-size: 12px;
    color: var(--text-secondary);
}
.directions-btn {
    align-self: flex-start;
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(79, 107, 255, 0.12);
    border: 1px solid rgba(79, 107, 255, 0.25);
    color: var(--accent-blue);
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.08em;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 100px;
    transition: background 0.2s;
}
.directions-btn:hover {
    background: rgba(79, 107, 255, 0.2);
}
.tier-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 20px;
    margin-bottom: 12px;
}
.tier-card--vip {
    border-color: rgba(79, 107, 255, 0.25);
    background: rgba(79, 107, 255, 0.06);
}
.tier-top {
    margin-bottom: 12px;
}
.tier-name {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.tier-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
}
.tier-scarcity {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--live-green);
    margin-top: 6px;
}
.scarcity-dot {
    width: 6px;
    height: 6px;
    background: var(--live-green);
    border-radius: 50%;
    animation: pulse 2s infinite;
}
.tier-perks {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.perk-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}
.tier-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.tier-price {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--text-primary);
    display: block;
}
.tier-zone {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    display: block;
    margin-top: 2px;
}
.qty-ctrl {
    display: flex;
    align-items: center;
    gap: 0;
}
.qty-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.2s;
}
.qty-btn--minus {
    background: var(--bg-elevated);
    color: var(--text-primary);
}
.qty-btn--minus:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.qty-btn--plus {
    background: var(--color-primary);
    color: var(--color-primary-text);
}
.qty-val {
    width: 40px;
    text-align: center;
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text-primary);
}
.sticky-footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    background: var(--overlay-blur);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    padding: 14px 20px calc(20px + env(safe-area-inset-bottom, 12px));
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 50;
}
.sticky-footer .footer-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.footer-label {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.12em;
}
.footer-items {
    font-size: 12px;
    color: var(--text-secondary);
}
.footer-pay-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}
.footer-total-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}
.footer-total-amt {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--text-primary);
    line-height: 1;
}
.book-btn {
    flex: 1;
    min-width: 0;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
    color: white;
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.06em;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}
.book-btn:hover:not(:disabled) {
    opacity: 0.92;
}
.book-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── VENUE LOCATION ─────────────────────────────────────────────────────────── */
.vl-map {
    position: relative;
    height: 280px;
    margin: 0 0 -32px;
    background: radial-gradient(ellipse at center, var(--map-bg-1) 0%, var(--map-bg-2) 70%);
    overflow: hidden;
}
.vl-map-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--map-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--map-grid) 1px, transparent 1px);
    background-size: 36px 36px;
}
.vl-map-route {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.vl-pin-mini {
    position: absolute;
    opacity: 0.5;
}
.vl-pin-main {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.vl-pin-pulse {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(166, 217, 106, 0.15);
    animation: pulse-ring 2s infinite;
}
.vl-pin-circle {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bg-card-hover);
    border: 3px solid var(--accent-lime);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(166, 217, 106, 0.4);
}
.vl-pin-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent-lime);
}
.vl-pin-label {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--accent-lime);
    letter-spacing: 0.14em;
    font-weight: 700;
    background: var(--overlay-blur-soft);
    padding: 4px 10px;
    border-radius: 100px;
    border: 1px solid rgba(166, 217, 106, 0.3);
}
.vl-cta-wrap {
    position: relative;
    z-index: 2;
    padding: 0 40px 18px;
}
.vl-directions-btn {
    width: 100%;
    padding: 16px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: 0.1em;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: var(--shadow-glow);
}
.vl-directions-btn:hover {
    opacity: 0.92;
}
.vl-info-card {
    margin: 0 20px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 24px;
    padding: 18px;
}
.vl-info-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}
.vl-eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--accent-lime);
    letter-spacing: 0.14em;
    margin-bottom: 6px;
}
.vl-venue-name {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--text-primary);
    line-height: 1.05;
    letter-spacing: 0.02em;
}
.vl-distance {
    background: rgba(125, 167, 255, 0.1);
    border: 1px solid rgba(125, 167, 255, 0.25);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    min-width: 64px;
}
.vl-dist-val {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--accent-blue);
    line-height: 1;
}
.vl-dist-unit {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--accent-blue);
    letter-spacing: 0.1em;
    font-weight: 700;
}
.vl-dist-away {
    font-family: var(--font-body);
    font-size: 8px;
    color: var(--text-muted);
    letter-spacing: 0.14em;
    margin-top: 4px;
}
.vl-addr-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding-top: 14px;
    border-top: 1px solid var(--border-soft);
}
.vl-addr-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(166, 217, 106, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.vl-addr-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}
.vl-section {
    padding: 18px 20px 14px;
}
.vl-section-line {
    height: 2px;
    width: 28px;
    background: var(--accent-lime);
    margin-bottom: 8px;
    border-radius: 2px;
}
.vl-section-title {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-primary);
    letter-spacing: 0.16em;
    font-weight: 700;
}
.vl-section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.vl-view-all {
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--accent-lime);
    letter-spacing: 0.12em;
    font-weight: 700;
    cursor: pointer;
}
.vl-facilities-grid {
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.vl-facility {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.vl-facility-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vl-facility-icon--blue {
    background: rgba(125, 167, 255, 0.12);
}
.vl-facility-icon--lime {
    background: rgba(166, 217, 106, 0.12);
}
.vl-facility-label {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.25;
    font-weight: 500;
}
.vl-events-list {
    padding: 0 20px 100px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vl-event-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 12px;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
}
.vl-event-card:hover {
    background: var(--bg-card-hover);
}
.vl-event-cover {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    flex-shrink: 0;
}
.vl-event-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.vl-event-date {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-secondary);
    letter-spacing: 0.12em;
}
.vl-event-title {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.2;
}
.vl-event-price {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--accent-lime);
    font-weight: 700;
}
.vl-event-chev {
    flex-shrink: 0;
}

/* ── TICKET CARD LINK ───────────────────────────────────────────────────────── */
.ticket-card--link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition:
        transform 0.15s,
        border-color 0.2s;
}
.ticket-card--link:hover {
    transform: translateY(-2px);
    border-color: rgba(166, 217, 106, 0.25);
}
.ticket-card--vip.ticket-card--link:hover {
    box-shadow: 0 8px 30px rgba(79, 107, 255, 0.3);
}

/* ══════════════════════════════════════════════════════════════════════════════
   EVENT DETAIL PAGE — Clean mobile-first design
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Header ─────────────────────────────────────────────────────────────────── */
/* == ed-page root: needs position relative for absolute header */
.ed-page {
    position: relative;
}

.ed-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 20 !important;
    background: transparent !important;
    border-bottom: none !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    padding-top: max(14px, env(safe-area-inset-top));
}
.ed-header .page-logo {
    color: #fff;
    font-size: 20px;
    letter-spacing: 3px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.ed-header .back-btn {
    background: rgba(8, 8, 16, 0.5);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    backdrop-filter: blur(8px);
}
.ed-header .bell-btn {
    background: rgba(8, 8, 16, 0.5);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    backdrop-filter: blur(8px);
}
.ed-header .nav-avatar {
    background: rgba(8, 8, 16, 0.5);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    backdrop-filter: blur(8px);
}
.ed-header .theme-toggle {
    background: rgba(8, 8, 16, 0.5);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    backdrop-filter: blur(8px);
}
.ed-header .icon-btn {
    background: rgba(8, 8, 16, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    backdrop-filter: blur(8px);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* == Hero == */
.ed-hero {
    position: relative;
    width: 100%;
    margin-top: 0;
    height: 420px;
    overflow: hidden;
    flex-shrink: 0;
}
.ed-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: src 0.3s;
}
.ed-hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(8, 8, 16, 0.3) 0%,
        rgba(8, 8, 16, 0) 40%,
        rgba(8, 8, 16, 0.85) 100%
    );
}
.ed-hero-overlay-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 20px 24px;
}
.ed-hero-overlay-content .event-badge {
    color: var(--accent-lime);
    font-size: 9px;
    letter-spacing: 0.16em;
    font-family: var(--font-body);
    font-weight: 700;
    display: block;
    margin-bottom: 8px;
}
.ed-hero-title {
    font-family: var(--font-display);
    font-size: 52px;
    letter-spacing: 0.02em;
    color: #fff;
    line-height: 0.92;
    margin: 0 0 14px;
}
.ed-hero-subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: 36px;
}
.ed-hero-starting {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ed-hero-starting .starting-label {
    font-family: var(--font-body);
    font-size: 9px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.14em;
}
.ed-hero-starting .starting-price {
    font-family: var(--font-display);
    font-size: 32px;
    color: var(--color-primary);
    line-height: 1;
}

/* ── Hero bottom row: price + share button side by side ──────────────────── */
.ed-hero-bottom-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

/* ── Share-to-Story button ─────────────────────────────────────────────────── */
.ed-share-story-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.92);
    padding: 7px 14px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.15s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    white-space: nowrap;
    flex-shrink: 0;
    margin-bottom: 2px; /* align vertically with starting-price baseline */
}
.ed-share-story-btn:hover {
    background: rgba(166, 217, 106, 0.18);
    border-color: var(--accent-lime);
    color: var(--accent-lime);
    transform: scale(1.04);
}
.ed-share-story-btn:active {
    transform: scale(0.97);
}
.ed-share-story-btn svg {
    flex-shrink: 0;
}

/* ── Body & layout ──────────────────────────────────────────────────────────── */
.ed-body {
    display: flex;
    flex-direction: column;
}
.ed-main {
    flex: 1;
}
.ed-sidebar {
    display: none;
} /* Desktop only — sembunyikan di mobile */

/* ── Info section ───────────────────────────────────────────────────────────── */
.ed-info-section {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    margin: 20px 20px 0;
    overflow: hidden;
}
.ed-info-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-secondary);
}
.ed-info-item:last-of-type {
    border-bottom: none;
}
.ed-info-item svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--accent-lime);
}
.ed-info-item .info-label {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    display: block;
    margin-bottom: 3px;
}
.ed-info-item .info-val {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
}

/* ── Mobile CTA button inside info section ──────────────────────────────────── */
.ed-mobile-cta {
    margin: 0;
    border-radius: 0;
    width: 100%;
    padding: 16px 20px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    border: none;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: opacity 0.2s;
}
.ed-mobile-cta:hover {
    opacity: 0.9;
}

/* ── Sections ───────────────────────────────────────────────────────────────── */
.section {
    padding: 28px 20px 0;
}
.section-title {
    font-family: var(--font-display);
    font-size: 26px;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    margin: 0 0 16px;
}
.about-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.8;
}

/* ── Lineup grid ────────────────────────────────────────────────────────────── */
.lineup-grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 0 20px 4px;
    margin: 0 -20px;
    scrollbar-width: none;
}
.lineup-grid::-webkit-scrollbar {
    display: none;
}

.artist-card {
    flex: 0 0 130px;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    height: 190px;
    cursor: pointer;
    transition: transform 0.2s;
}
.artist-card:hover {
    transform: scale(1.02);
}
.artist-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.artist-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 10px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, transparent 100%);
}
.artist-role {
    display: block;
    font-family: var(--font-body);
    font-size: 8px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.12em;
    margin-bottom: 2px;
}
.artist-name {
    display: block;
    font-family: var(--font-display);
    font-size: 14px;
    color: #fff;
    letter-spacing: 0.04em;
    line-height: 1;
}

/* ── Map card ───────────────────────────────────────────────────────────────── */
.map-card {
    margin: 28px 20px 0;
    border-radius: 20px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
}
.map-visual {
    height: 130px;
    background: var(--bg-card-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.map-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--map-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--map-grid) 1px, transparent 1px);
    background-size: 28px 28px;
}
.map-pin {
    position: relative;
    z-index: 1;
}
.map-info {
    padding: 16px 20px;
}
.map-name {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.map-addr {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
}
.directions-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(79, 107, 255, 0.1);
    border: 1px solid rgba(79, 107, 255, 0.25);
    color: var(--accent-blue);
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.08em;
    cursor: pointer;
    padding: 9px 16px;
    border-radius: 100px;
    transition: background 0.2s;
    text-decoration: none;
}
.directions-btn:hover {
    background: rgba(79, 107, 255, 0.18);
}

/* ── Tier cards (mobile) ────────────────────────────────────────────────────── */
.ed-mobile-tiers {
    padding-bottom: 0;
}
.tier-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 12px;
}
.tier-card--vip {
    border-color: rgba(79, 107, 255, 0.25);
    background: rgba(79, 107, 255, 0.04);
}
.tier-top {
    margin-bottom: 12px;
}
.tier-name {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.tier-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.65;
}
.tier-scarcity {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--live-green);
    margin-top: 8px;
}
.scarcity-dot {
    width: 6px;
    height: 6px;
    background: var(--live-green);
    border-radius: 50%;
    animation: pulse 2s infinite;
}
.tier-perks {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.perk-tag {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--text-secondary);
}
.perk-tag svg {
    color: var(--accent-lime);
    flex-shrink: 0;
}
.tier-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid var(--border-soft);
}
.tier-price {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--text-primary);
    display: block;
    line-height: 1;
}
.tier-zone {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    display: block;
    margin-top: 3px;
}
.qty-ctrl {
    display: flex;
    align-items: center;
    gap: 0;
}
.qty-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.2s;
}
.qty-btn--minus {
    background: var(--bg-elevated);
    color: var(--text-primary);
}
.qty-btn--minus:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.qty-btn--plus {
    background: var(--color-primary);
    color: var(--color-primary-text);
}
.qty-val {
    width: 40px;
    text-align: center;
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text-primary);
}

/* ── Sticky footer (mobile payment bar) ─────────────────────────────────────── */
.ed-mobile-footer.sticky-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.sticky-footer .footer-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.footer-label {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.12em;
}
.footer-items {
    font-size: 12px;
    color: var(--text-secondary);
}
.footer-pay-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex: 1;
}
.footer-total-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.footer-total-label {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.12em;
}
.footer-total-amt {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--text-primary);
    line-height: 1;
}
.book-btn {
    flex: 1;
    min-width: 0;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
    color: white;
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.06em;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}
.book-btn:hover:not(:disabled) {
    opacity: 0.92;
}
.book-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME — Banner Slider (from /api/banners)
   ═══════════════════════════════════════════════════════════════════════════ */
.home-banner-slider {
    position: relative;
    overflow: hidden;
    margin: 12px 16px 20px;
    border-radius: 14px;
}
.home-banner-track {
    display: flex;
    width: 100%;
    will-change: transform;
}
.home-banner-slide {
    min-width: 100%;
    flex-shrink: 0;
}
.home-banner-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    border-radius: 14px;
}
.home-banner-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
}
.home-bdot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
    border: none;
    padding: 0;
    cursor: pointer;
    transition:
        background 0.2s,
        width 0.2s;
}
.home-bdot--active {
    background: var(--accent-lime);
    width: 18px;
    border-radius: 3px;
}

/* ── Grid with waterfall cascade ── */
.exp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 4px 16px 100px;
}
@media (max-width: 360px) {
    .exp-grid {
        grid-template-columns: 1fr;
    }
}

/* Waterfall cascade entrance animation */
@keyframes exp-fall-in {
    0% {
        opacity: 0;
        transform: translateY(28px) scale(0.96);
    }
    60% {
        opacity: 1;
        transform: translateY(-4px) scale(1.01);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.exp-cascade {
    animation: exp-fall-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
    /* stagger each card: --i CSS var set inline */
    animation-delay: calc(var(--i, 0) * 55ms);
}

.exp-shimmer-wrap {
    animation: exp-fall-in 0.38s ease both;
    animation-delay: calc(var(--i, 0) * 50ms, 0ms);
}

.exp-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 0;
}
.exp-reset-btn {
    padding: 12px 28px;
    background: var(--accent-lime);
    color: #16151d;
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition:
        opacity 0.15s,
        transform 0.1s;
}
.exp-reset-btn:hover {
    opacity: 0.88;
    transform: scale(1.02);
}

/* Card wrap fills grid cell */
.exp-card-wrap {
    display: contents;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUDIT FIX — Comprehensive CSS hardening
   ═══════════════════════════════════════════════════════════════════════════

   1. Fixed footer stacking — z-index layering enforced
   2. Light-theme overrides for new components (Explore, Event Detail)
   3. Hero overlay softened for light mode
   4. Big transition selector trimmed to structural elements only
   5. overflow-x safety restored without breaking fixed positioning
   6. Negative margin scroll containers guarded
/* ═══════════════════════════════════════════════════════════════════════════
   RELATED EVENTS SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.event-related-section {
    padding: 32px 16px 100px;
    border-top: 1px solid var(--border-soft);
    background: var(--bg-page);
}

/* ── Section header ─────────────────────────────────────────────────────── */
.ed-related-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}
.ed-related-header-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ed-related-eyebrow {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-lime);
}
.ed-related-heading {
    font-family: var(--font-display);
    font-size: 26px;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.1;
}
.ed-related-see-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    text-decoration: none;
    flex-shrink: 0;
    transition: color 0.15s;
    padding-bottom: 4px; /* align baseline with heading */
}
.ed-related-see-all:hover {
    color: var(--accent-lime);
}
.ed-related-see-all svg {
    transition: transform 0.15s;
}
.ed-related-see-all:hover svg {
    transform: translateX(3px);
}

/* ── Card grid ──────────────────────────────────────────────────────────── */
.ed-related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

/* EventCard (explore-event-card-v2) sizing inside this grid */
.ed-related-grid .explore-event-card-v2 {
    display: flex;
    flex-direction: row;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition:
        border-color 0.15s,
        transform 0.15s,
        box-shadow 0.15s;
    min-height: 110px;
}
.ed-related-grid .explore-event-card-v2:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

/* Image — fixed left column */
.ed-related-grid .explore-ecard-img-wrap {
    width: 110px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.ed-related-grid .explore-ecard-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.ed-related-grid .explore-event-card-v2:hover .explore-ecard-img {
    transform: scale(1.05);
}
.ed-related-grid .explore-ecard-cat {
    position: absolute;
    top: 8px;
    left: 8px;
    font-family: var(--font-body);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    border-radius: 100px;
    background: var(--accent-lime);
    color: var(--text-on-accent, #0a0a14);
    white-space: nowrap;
    pointer-events: none;
}

/* Body — right column */
.ed-related-grid .explore-ecard-body {
    flex: 1;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    justify-content: center;
}
.ed-related-grid .explore-ecard-title {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.3px;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ed-related-grid .explore-ecard-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ed-related-grid .explore-ecard-meta svg {
    flex-shrink: 0;
    color: var(--text-muted);
}
.ed-related-grid .explore-ecard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
}
.ed-related-grid .explore-ecard-price {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-lime);
    letter-spacing: 0.02em;
}
.ed-related-grid .explore-ecard-arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    flex-shrink: 0;
    transition:
        background 0.15s,
        color 0.15s;
}
.ed-related-grid .explore-event-card-v2:hover .explore-ecard-arrow {
    background: var(--accent-lime);
    color: var(--text-on-accent, #0a0a14);
    border-color: var(--accent-lime);
}

/* Shimmer row in related grid */
.ed-related-grid .event-card-shimmer {
    display: flex;
    flex-direction: row;
    border-radius: 18px;
    overflow: hidden;
    min-height: 110px;
}
.ed-related-grid .event-card-shimmer .shim {
    border-radius: 0;
}

/* ── Light mode ─────────────────────────────────────────────────────────── */
[data-theme="light"] .event-related-section {
    background: #f5f5f7;
    border-top-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .ed-related-heading {
    color: #111;
}
[data-theme="light"] .ed-related-see-all {
    color: #555;
}
[data-theme="light"] .ed-related-see-all:hover {
    color: #3d6600;
}
[data-theme="light"] .ed-related-grid .explore-event-card-v2 {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .ed-related-grid .explore-event-card-v2:hover {
    border-color: rgba(0, 0, 0, 0.14);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .ed-related-grid .explore-ecard-title {
    color: #111;
}
[data-theme="light"] .ed-related-grid .explore-ecard-meta {
    color: #666;
}
[data-theme="light"] .ed-related-grid .explore-ecard-arrow {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
    color: #555;
}

/* ══════════════════════════════════════════════════════════════════════════
   DETAIL IMAGES SLIDER
   ══════════════════════════════════════════════════════════════════════════ */

.detail-img-wrap {
    position: relative;
    /* negative margin agar slide mepet edge, padding kompensasi */
    margin: 0 -20px;
}

/* ── Scrollable track ───────────────────────────────────────────────────── */
.detail-img-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* padding: kiri = 20px (kompensasi negative margin), kanan juga */
    padding: 0 20px 4px;
}
.detail-img-track::-webkit-scrollbar {
    display: none;
}

/* ── Setiap slide ───────────────────────────────────────────────────────── */
.detail-img-slide {
    flex: 0 0 calc(100% - 40px); /* full width minus 2×padding */
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Kalau hanya 1 foto, tampilkan full tanpa kesan "ada lagi" */
.detail-img-track:has(.detail-img-slide:only-child) .detail-img-slide {
    flex: 0 0 100%;
}

/* Peek sedikit slide berikutnya kalau > 1 */
@supports (selector(:has(*))) {
    .detail-img-track:has(.detail-img-slide:not(:only-child)) .detail-img-slide {
        flex: 0 0 88%; /* sisa 12% = peek slide berikutnya */
    }
}

/* ── Caption ────────────────────────────────────────────────────────────── */
.detail-img-caption {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.55;
    padding: 0 2px;
    margin: 0;
}

/* ── Dots indicator ─────────────────────────────────────────────────────── */
.detail-img-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 10px 0 2px;
}
.detail-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
    transition:
        background 0.2s,
        width 0.2s,
        border-radius 0.2s;
    flex-shrink: 0;
}
.detail-dot--active {
    width: 20px;
    border-radius: 3px;
    background: var(--accent-lime);
}

/* Light mode */
[data-theme="light"] .detail-dot {
    background: rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .detail-dot--active {
    background: #5a9000;
}


/* ── Footer beli: transisi hide saat melewati kartu venue ──────────────────── */
.ed-mobile-footer.sticky-footer {
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.ed-mobile-footer.ed-footer-hidden {
    transform: translateX(-50%) translateY(130%);
    opacity: 0;
    pointer-events: none;
}

/* ── Peta venue asli (Leaflet) di detail event ─────────────────────────────── */
.map-visual--live {
    height: 240px;
    display: block;
    background: var(--bg-elevated);
    /* Kurung z-index internal Leaflet (pane 400, kontrol 1000) di dalam
       stacking context container — tanpa ini peta menutupi footer beli
       (z-index 80) saat footer melintas di atas area peta. */
    position: relative;
    z-index: 0;
    isolation: isolate;
}
/* ==== page-explore.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   EXPLORE PAGE — v2 redesign
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   HEADER — "Jadi Partner" pill (kiri) + PULSE logo (tengah) + actions (kanan)
   ───────────────────────────────────────────────────────────────────────────── */
.exp-partner-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 7px 11px;
    border-radius: 20px;
    background: rgba(166, 217, 106, 0.08);
    border: 1px solid rgba(166, 217, 106, 0.28);
    color: var(--accent-lime);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition:
        background 0.2s,
        border-color 0.2s;
}
.exp-partner-btn:hover {
    background: rgba(166, 217, 106, 0.15);
    border-color: rgba(166, 217, 106, 0.5);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SEARCH BAR ROW
   ───────────────────────────────────────────────────────────────────────────── */
.exp-searchbar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px 12px;
    /* Menempel di atas viewport saat scroll: tombol search selalu terjangkau
       tanpa harus kembali ke atas. Di bawah bottom-nav (100) & search overlay
       (300), di atas kartu/section (≤50). */
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--bg-page);
    /* Garis halus saat menempel agar terpisah dari konten yang lewat. */
    box-shadow: 0 1px 0 var(--border-soft);
}

.exp-searchbar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    color: var(--text-muted);
    cursor: pointer;
    text-align: left;
    transition:
        border-color 0.18s,
        background 0.18s;
    user-select: none;
    -webkit-user-select: none;
}
.exp-searchbar:hover,
.exp-searchbar:focus-visible {
    border-color: var(--accent-lime);
    background: var(--bg-elevated-2);
}

.exp-searchbar-ph {
    flex: 1;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    transition:
        opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.65;
    transform: translateY(0);
}
.exp-searchbar-ph.ph-out {
    opacity: 0;
    transform: translateY(5px);
}
.exp-searchbar-ph.ph-in {
    opacity: 0.65;
    transform: translateY(0);
}

.exp-filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    color: var(--text-secondary);
    cursor: pointer;
    transition:
        background 0.15s,
        border-color 0.15s,
        color 0.15s;
}
.exp-filter-btn:hover {
    background: var(--bg-elevated-2);
    border-color: var(--accent-lime);
    color: var(--accent-lime);
}

[data-theme="light"] .exp-searchbar,
[data-theme="light"] .exp-filter-btn {
    background: var(--bg-card);
    border-color: var(--border);
}
[data-theme="light"] .exp-searchbar:hover {
    border-color: var(--accent-lime);
    background: var(--bg-elevated);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SPONSORED PROMO BANNER
   ───────────────────────────────────────────────────────────────────────────── */
.exp-promo-wrap {
    padding: 0 20px 22px;
}

.exp-promo {
    position: relative;
    border-radius: 20px;
    padding: 22px 20px 20px;
    background:
        linear-gradient(
            140deg,
            #1a3a5c 0%,
            #0d2744 40%,
            #061e16 100%
        );
    border: 1px solid rgba(75, 216, 143, 0.14);
    overflow: hidden;
}

/* Glow blobs */
.exp-promo::before {
    content: "";
    position: absolute;
    top: -30px;
    left: -20px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(30, 120, 220, 0.35) 0%, transparent 70%);
    pointer-events: none;
}
.exp-promo::after {
    content: "";
    position: absolute;
    bottom: -40px;
    right: -20px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(75, 216, 143, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

.exp-promo-tag {
    position: absolute;
    top: 14px;
    right: 16px;
    font-family: var(--font-body);
    font-size: 8px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
    pointer-events: none;
}

.exp-promo-heading {
    font-family: var(--font-display);
    font-size: 26px;
    line-height: 1.05;
    letter-spacing: 0.04em;
    color: #fff;
    font-style: italic;
    margin: 0 0 10px;
    position: relative;
    max-width: 80%;
}

.exp-promo-desc {
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 18px;
    position: relative;
    max-width: 78%;
}

.exp-promo-cta {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    background: var(--accent-lime, #a6d96a);
    color: #16151d;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.08em;
    font-weight: 700;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    position: relative;
    transition:
        opacity 0.2s,
        transform 0.15s;
}
.exp-promo-cta:hover {
    opacity: 0.88;
    transform: scale(1.03);
}
.exp-promo-cta:active {
    transform: scale(0.97);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION HEADER ROW  (TRENDING NOW / Live Events / View All)
   ───────────────────────────────────────────────────────────────────────────── */
.exp-section-hdr-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 4px 20px 14px;
}

.exp-section-hdr-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.exp-section-eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.2em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.exp-section-title {
    font-family: var(--font-display);
    font-size: 30px;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    margin: 0;
}

.exp-view-all {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--accent-lime);
    text-decoration: none;
    white-space: nowrap;
    padding-bottom: 5px;
    opacity: 0.85;
    transition: opacity 0.15s;
}
.exp-view-all:hover {
    opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CATEGORY CHIPS (inline filter row)
   ───────────────────────────────────────────────────────────────────────────── */
.exp-chips {
    display: flex;
    gap: 8px;
    padding: 0 20px 16px;
    overflow-x: auto;
    scrollbar-width: none;
}
.exp-chips::-webkit-scrollbar {
    display: none;
}

.exp-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.12em;
    white-space: nowrap;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition:
        background 0.18s,
        border-color 0.18s,
        color 0.18s;
}
.exp-chip:hover {
    border-color: var(--border-strong);
    color: var(--text-secondary);
}
.exp-chip--on {
    background: var(--accent-lime);
    border-color: transparent;
    color: #16151d;
    font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESULTS BAR
   ───────────────────────────────────────────────────────────────────────────── */
.exp-results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 12px;
}
.exp-results-left {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.exp-results-eyebrow {
    font-family: var(--font-body);
    font-size: 8px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.6;
}
.exp-results-count {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
.exp-results-right {
    display: flex;
    align-items: center;
}
.exp-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: none;
    border: 1px solid var(--border-soft);
    border-radius: 100px;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition:
        border-color 0.18s,
        color 0.18s;
}
.exp-clear-btn:hover {
    border-color: var(--accent-lime);
    color: var(--accent-lime);
}

/* ─────────────────────────────────────────────────────────────────────────────
   EVENT FEED + CARD V2
   ───────────────────────────────────────────────────────────────────────────── */
.exp-feed {
    display: flex;
    flex-direction: column;
    padding: 0 16px 4px;
}

/* ── Marketplace grid (Shopee-style) ─────────────────────────────── */
.exp-mkt-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
}
/* Selalu 2 kolom (gaya marketplace mobile) — hanya lebarkan jarak di layar besar. */
@media (min-width: 640px) {
    .exp-mkt-grid { gap: 16px; }
}

.exp-mkt-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.exp-mkt-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-lime, #a6d96a);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}

.exp-mkt-img-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--bg-elevated);
}
.exp-mkt-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.exp-mkt-card:hover .exp-mkt-img { transform: scale(1.05); }

.exp-mkt-cat {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 4px 8px;
    border-radius: 100px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    backdrop-filter: blur(4px);
}
.exp-mkt-live {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    padding: 4px 8px;
    border-radius: 100px;
    background: #ff2d55;
    color: #fff;
}
.exp-mkt-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: exp-mkt-pulse 1.2s ease-in-out infinite;
}
@keyframes exp-mkt-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}
.exp-mkt-free {
    position: absolute;
    bottom: 8px;
    left: 8px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .05em;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--accent-lime, #a6d96a);
    color: #16151d;
}

.exp-mkt-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 9px 10px 11px;
    flex: 1;
}
.exp-mkt-title {
    font-size: 12.5px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--text-primary, #fff);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}
.exp-mkt-price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.exp-mkt-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--accent-lime, #a6d96a);
    letter-spacing: -.01em;
}
.exp-mkt-hot {
    font-size: 9px;
    font-weight: 700;
    color: #ff6b3d;
}
.exp-mkt-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: auto;
}
.exp-mkt-loc {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--text-muted);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
}
.exp-mkt-loc svg { flex-shrink: 0; opacity: .7; }
.exp-mkt-sold {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.exp-mkt-grid .exp-shimmer-wrap { width: 100%; }

/* Wishlist heart (floating, gaya marketplace) */
.exp-mkt-wish {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #8a8a99;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    transition: transform .15s ease, color .15s ease;
    z-index: 2;
}
.exp-mkt-wish svg { fill: none; }
.exp-mkt-wish:hover { transform: scale(1.1); }
.exp-mkt-wish:active { transform: scale(.9); }
.exp-mkt-wish--on { color: #ff2d55; }
.exp-mkt-wish--on svg { fill: #ff2d55; }

/* Status strip di bawah gambar */
.exp-mkt-strip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .45));
}
.exp-mkt-strip--live { background: #ff2d55; }
.exp-mkt-strip--out { background: rgba(20, 20, 28, .88); color: #d0d0d8; }
.exp-mkt-strip--hot { background: linear-gradient(90deg, #ff6b3d, #ff2d55); }

/* Store / location row (bawah kartu, dengan pemisah) */
.exp-mkt-store {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--border-soft);
    color: var(--text-muted);
    min-width: 0;
}
.exp-mkt-store-ic { display: inline-flex; flex-shrink: 0; opacity: .8; }
.exp-mkt-store-name {
    font-size: 10.5px;
    font-weight: 500;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.exp-mkt-chev { flex-shrink: 0; opacity: .5; }

/* Sold count di baris harga → dorong ke kanan */
.exp-mkt-price-row .exp-mkt-sold { margin-left: auto; font-size: 9.5px; }

/* ── Kartu marketplace gaya Kiddo (merchant • meta • harga • rating) ── */
.exp-mkt-img-wrap { aspect-ratio: 4 / 3; }
.exp-mkt-body { gap: 3px; padding: 10px 11px 12px; }
.exp-mkt-merchant {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-lime, #22c55e);
    line-height: 1.2;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.exp-mkt-title {
    font-size: 13px;
    font-weight: 700;
    min-height: 2.5em;
    margin: 1px 0 2px;
}
.exp-mkt-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 2px 0;
}
.exp-mkt-meta-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.exp-mkt-meta-row svg { flex-shrink: 0; opacity: .75; }
.exp-mkt-price-block {
    display: flex;
    flex-direction: column;
    margin-top: 4px;
}
.exp-mkt-from { font-size: 10px; color: var(--text-muted); }
.exp-mkt-price { font-size: 16px; }
.exp-mkt-foot {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-soft);
}
.exp-mkt-star { color: #ffb400; flex-shrink: 0; }
.exp-mkt-foot .exp-mkt-sold { font-size: 11px; color: var(--text-muted); margin: 0; }

/* Cascade animation (reuse existing --i var) */
.exp-cascade {
    opacity: 0;
    transform: translateY(18px);
    animation: exp-cascade-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes exp-cascade-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Card wrapper ── */
.exp-card-v2 {
    display: block;
    text-decoration: none;
    padding-bottom: 32px;
    /* Thin separator between cards */
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 28px;
}
.exp-card-v2:last-child {
    border-bottom: none;
}

/* Category eyebrow above image */
.exp-card-v2__eyebrow {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-bottom: 8px;
    opacity: 0.7;
}

/* Image container */
.exp-card-v2__img-wrap {
    position: relative;
    height: 255px;
    border-radius: 18px;
    overflow: hidden;
    background: var(--bg-card);
}

.exp-card-v2__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.exp-card-v2:hover .exp-card-v2__img {
    transform: scale(1.04);
}

/* Bottom gradient overlay on image */
.exp-card-v2__img-wrap::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
    pointer-events: none;
}

/* Status badge on image */
.exp-card-v2__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 100px;
    z-index: 1;
    pointer-events: none;
}
.exp-card-v2__badge--hot {
    background: var(--accent-lime, #a6d96a);
    color: #16151d;
    font-weight: 700;
}
.exp-card-v2__badge--limited {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.42);
    color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Card body */
.exp-card-v2__body {
    padding: 14px 2px 0;
}

/* Big event title */
.exp-card-v2__title {
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    text-transform: uppercase;
    margin: 0 0 10px;
    /* Allow 2 lines max */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta row: venue/date LEFT — price RIGHT */
.exp-card-v2__meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.exp-card-v2__venue-date {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.exp-card-v2__venue {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exp-card-v2__date {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

.exp-card-v2__price-wrap {
    text-align: right;
    flex-shrink: 0;
}

.exp-card-v2__price-label {
    display: block;
    font-family: var(--font-body);
    font-size: 7px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.exp-card-v2__price {
    display: block;
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1;
    color: var(--accent-lime);
    letter-spacing: 0.02em;
}

/* Light theme card adjustments */
[data-theme="light"] .exp-card-v2__badge--limited {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.3);
    color: rgba(0, 0, 0, 0.75);
}

/* ─────────────────────────────────────────────────────────────────────────────
   EMPTY STATE
   ───────────────────────────────────────────────────────────────────────────── */
.exp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 60px 20px;
    text-align: center;
    width: 100%;
}

.exp-reset-btn {
    padding: 10px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: 100px;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: opacity 0.2s;
}
.exp-reset-btn:hover {
    opacity: 0.75;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SHIMMER CARDS
   ───────────────────────────────────────────────────────────────────────────── */
.exp-shimmer-wrap {
    padding-bottom: 28px;
    opacity: 0;
    animation: exp-cascade-in 0.4s ease forwards;
}

/* ─────────────────────────────────────────────────────────────────────────────
   EXPLORE BY GENRE SECTION
   ───────────────────────────────────────────────────────────────────────────── */
.exp-genre-section {
    padding: 4px 20px calc(100px + env(safe-area-inset-bottom, 0px)) 20px;
}

.exp-genre-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    padding-top: 12px;
}

.exp-genre-chip {
    display: inline-flex;
    align-items: center;
    padding: 9px 20px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    transition:
        border-color 0.18s,
        color 0.18s,
        background 0.18s;
}
.exp-genre-chip:hover,
.exp-genre-chip--on {
    border-color: var(--accent-lime);
    color: var(--accent-lime);
    background: rgba(166, 217, 106, 0.06);
}
.exp-genre-chip--on {
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SEARCH OVERLAY  (slide-up from bottom)
   ───────────────────────────────────────────────────────────────────────────── */
.exp-sovl-wrap {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100%;
    max-width: 480px;
    z-index: 300;
    transform: translateX(-50%) translateY(100%);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 32px 80px rgba(0, 0, 0, 0.9);
    pointer-events: none;
}
.exp-sovl-wrap--open {
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
[data-theme="light"] .exp-sovl-wrap {
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.12),
        0 32px 80px rgba(0, 0, 0, 0.3);
}

/* Backdrop */
.exp-sovl-backdrop {
    position: fixed;
    inset: 0;
    z-index: 299;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.exp-sovl-backdrop--open {
    opacity: 1;
    pointer-events: auto;
}
[data-theme="light"] .exp-sovl-backdrop {
    background: rgba(0, 0, 0, 0.32);
}

/* Overlay body */
.exp-sovl {
    position: absolute;
    inset: 0;
    background: var(--bg-base);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header bar */
.exp-sovl-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--border-soft);
    flex-shrink: 0;
    background: var(--bg-base);
    padding-top: max(12px, env(safe-area-inset-top, 12px));
}

/* Back button */
.exp-sovl-back {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s;
}
.exp-sovl-back:hover {
    background: var(--bg-elevated-2);
}

/* Input wrapper */
.exp-sovl-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-elevated);
    border: 1.5px solid var(--border-strong);
    border-radius: 12px;
    padding: 0 12px;
    height: 44px;
    transition:
        border-color 0.18s,
        box-shadow 0.18s;
}
.exp-sovl-input-wrap:focus-within {
    border-color: var(--accent-lime);
    box-shadow: 0 0 0 3px rgba(75, 216, 143, 0.12);
}
.exp-sovl-input-wrap svg {
    flex-shrink: 0;
    color: var(--text-muted);
}

.exp-sovl-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    min-width: 0;
}
.exp-sovl-input::placeholder {
    color: var(--text-muted);
}

.exp-sovl-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-elevated-2);
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s;
}
.exp-sovl-clear:hover {
    color: var(--text-primary);
}

/* Chips inside overlay */
.exp-sovl-chips {
    display: flex;
    gap: 8px;
    padding: 10px 14px 8px;
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: none;
    border-bottom: 1px solid var(--border-soft);
}
.exp-sovl-chips::-webkit-scrollbar {
    display: none;
}

/* Count bar */
/* Bagian "Penyelenggara" (merchant) di hasil pencarian — baris scroll horizontal */
.exp-sovl-merchants {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px 16px 2px;
    flex-shrink: 0;
}
.exp-merch-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}
.exp-merch-row::-webkit-scrollbar { display: none; }
.exp-merch-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    max-width: 220px;
    padding: 6px 12px 6px 6px;
    border-radius: 999px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color .15s, background .15s;
}
.exp-merch-item:hover { border-color: var(--accent-lime); background: var(--bg-elevated-2); }
.exp-merch-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.exp-merch-avatar--fb {
    font-weight: 800;
    font-size: 15px;
    color: var(--text-on-accent);
    background: var(--accent-blue);
}
.exp-merch-name {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.exp-merch-verified { color: var(--accent-lime); font-size: 12px; flex: none; }

.exp-sovl-count-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 6px;
    flex-shrink: 0;
}
.exp-sovl-count {
    font-size: 1.1rem;
    font-family: var(--font-display);
    letter-spacing: 0.04em;
    color: var(--text-primary);
}

/* Scrollable results */
.exp-sovl-results {
    flex: 1;
    overflow-y: auto;
    padding: 10px 14px calc(80px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.exp-sovl-results::-webkit-scrollbar {
    display: none;
}

/* ── Body scroll lock ── */
body.body-scroll-locked {
    overflow: hidden !important;
    touch-action: none;
}

/* ── Light theme overrides for overlay ── */
[data-theme="light"] .exp-sovl {
    background: var(--bg-page);
}
[data-theme="light"] .exp-sovl-header {
    background: var(--bg-page);
    border-color: var(--border);
}
[data-theme="light"] .exp-sovl-back {
    background: var(--bg-card);
    border-color: var(--border);
}
[data-theme="light"] .exp-sovl-input-wrap {
    background: var(--bg-card);
    border-color: var(--border);
}
[data-theme="light"] .exp-sovl-input-wrap:focus-within {
    border-color: var(--accent-lime);
}

/* ── "Untuk Kamu": rail rekomendasi (horizontal scroll) ───────────────────── */
.exp-fy-section { padding: 4px 0 10px; }
.exp-fy-head { display: flex; flex-direction: column; gap: 2px; padding: 0 16px 8px; }
.exp-fy-title-h { font-size: 18px; font-weight: 800; margin: 0; color: var(--text-primary); }
.exp-fy-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 2px 16px 6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.exp-fy-rail::-webkit-scrollbar { display: none; }
.exp-fy-card {
    flex: 0 0 150px;
    scroll-snap-align: start;
    text-decoration: none;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    overflow: hidden;
    transition: transform .16s ease, border-color .16s ease;
}
.exp-fy-card:hover { transform: translateY(-2px); border-color: var(--accent-lime); }
.exp-fy-img-wrap { position: relative; aspect-ratio: 4 / 3; background: var(--bg-elevated); }
.exp-fy-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exp-fy-live {
    position: absolute; top: 6px; left: 6px;
    font-size: 8.5px; font-weight: 800; letter-spacing: .06em;
    padding: 3px 6px; border-radius: 100px; background: #ff2d55; color: #fff;
}
.exp-fy-body { padding: 8px 9px 10px; }
.exp-fy-title {
    font-size: 12px; font-weight: 600; color: var(--text-primary);
    line-height: 1.3; margin-bottom: 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.6em;
}
.exp-fy-price { font-size: 13px; font-weight: 800; color: var(--accent-lime); }

/* ── Infinite scroll: kartu shimmer saat memuat chunk berikutnya ──────────── */
.exp-mkt-grid--more {
    margin-top: 12px;
    padding: 0 16px 24px;
}

/* ==== page-home.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   HOME PAGE
   Auto-extracted from styles.css — edit this file for page-specific styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ── PAGE WRAPPER ───────────────────────────────────────────────────────────── */
.page {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    background: var(--bg-page);
    min-height: 100dvh;
    padding-bottom: 90px;
}
/* Explore page: header di atas hero — transparan, tidak sticky */
.exp-header {
    position: relative;
    background: transparent;
    border-bottom: none;
}
.page-logo {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 3px;
    color: var(--text-soft-accent);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* ── HOME ───────────────────────────────────────────────────────────────────── */
.search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    padding: 12px 16px;
    margin: 0 20px 16px;
    cursor: text;
}
.search-placeholder {
    font-size: 13px;
    color: var(--text-secondary);
}
.search-input-home {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    padding: 0;
}
.search-input-home::placeholder {
    color: var(--text-secondary);
}
/* ── CHIP STRIP (wraps chip-row + quick-purchase-btn) ───────────────────────── */
.chip-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px 16px;
}
.chip-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}
.chip-row::-webkit-scrollbar {
    display: none;
}

/* Tombol Beli Cepat — sembunyikan di mobile, tampilkan di desktop */
.quick-purchase-btn {
    display: none;
    align-items: center;
    gap: 8px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 10px 20px;
    border-radius: 100px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s;
}
.quick-purchase-btn:hover {
    opacity: 0.88;
}
.chip {
    white-space: nowrap;
    padding: 8px 18px;
    border-radius: 100px;
    background: var(--bg-card-hover);
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.04em;
    text-decoration: none;
    display: inline-block;
}
.chip--active {
    background: var(--chip-active-bg);
    color: var(--chip-active-text);
    border-color: var(--chip-active-bg);
    font-weight: 700;
}
.hero-event {
    position: relative;
    overflow: hidden;
    display: block;
    text-decoration: none;
    aspect-ratio: 4/3;
    margin: 0 20px 20px;
    border-radius: 16px;
}
.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.2) 60%,
        transparent 100%
    );
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.live-badge {
    font-size: 10px;
    color: var(--accent-lime);
    letter-spacing: 0.12em;
    font-family: var(--font-body);
    margin-bottom: 6px;
}
.hero-name {
    font-family: var(--font-display);
    font-size: 40px;
    color: white;
    line-height: 1;
    margin-bottom: 12px;
    letter-spacing: 0.02em;
}
.hero-meta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
}
.hero-price {
    color: var(--accent-lime);
    font-size: 16px;
    font-family: var(--font-body);
    font-weight: 700;
}
.flash-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px 20px;
    margin: 0 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.flash-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.flash-icon-wrap {
    width: 32px;
    height: 32px;
    background: rgba(166, 217, 106, 0.12);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.flash-label {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}
.cd-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cd-block {
    background: var(--bg-elevated);
    border-radius: 8px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cd-value {
    font-family: var(--font-display);
    font-size: 30px;
    color: var(--text-primary);
    line-height: 1;
}
.cd-sep {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--text-muted);
}
.grab-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
    color: white;
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: 0.1em;
    cursor: pointer;
    font-weight: 700;
    transition: opacity 0.2s;
}
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    margin-bottom: 16px;
    gap: 12px;
}
.section-title {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--text-primary);
    letter-spacing: 0.06em;
}
.section-title-xl {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    line-height: 1;
}
.section-title--accent {
    color: var(--accent-lime);
}
.view-all {
    background: none;
    border: none;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: color 0.2s;
    text-decoration: none;
    white-space: nowrap;
}
.view-all:hover {
    color: var(--accent-lime);
}
.trending-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 20px;
}
.trending-card {
    display: block;
    text-decoration: none;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    overflow: hidden;
}
.trending-img-wrap {
    position: relative;
    width: 100%;
    height: 160px;
    overflow: hidden;
}
.trending-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.trending-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    gap: 10px;
}
.trending-name {
    display: block;
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.trending-date {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.trending-price {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--accent-lime);
    white-space: nowrap;
    font-weight: 700;
    flex-shrink: 0;
}
.trending-venue-badge {
    display: none;
}
.trending-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

/* ── UPCOMING NEAR YOU ─────────────────────────────────────────────────────── */
.upcoming-section {
    background: var(--bg-base);
}
.upcoming-nav-btns {
    display: none;
    gap: 8px;
}
.upcoming-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}
.upcoming-nav-btn:hover {
    background: var(--bg-elevated-2);
    color: var(--text-primary);
}
.upcoming-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 20px;
}
.upcoming-card {
    display: flex;
    gap: 14px;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    transition: background 0.2s;
}
.upcoming-card:hover {
    background: var(--bg-elevated);
}
.upcoming-img-wrap {
    position: relative;
    width: 90px;
    height: 80px;
    flex-shrink: 0;
}
.upcoming-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.upcoming-date-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--accent-blue);
    color: #fff;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: 100px;
}
.upcoming-card-body {
    flex: 1;
    padding: 12px 14px 12px 0;
}
.upcoming-card-name {
    display: block;
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
.upcoming-card-venue {
    display: block;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.upcoming-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.upcoming-card-price {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--accent-lime);
    font-weight: 700;
}
.upcoming-card-arrow {
    font-size: 14px;
    color: var(--text-muted);
}

/* ── RECOMMENDED FOR YOU ──────────────────────────────────────────────────── */
.recommended-section {
    background: var(--bg-base);
}
.recommended-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 20px;
}
.rec-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    text-decoration: none;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 12px;
    transition: background 0.2s;
}
.rec-card:hover {
    background: var(--bg-elevated);
}
.rec-img-wrap {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.rec-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rec-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.rec-genre {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--text-muted);
}
.rec-name {
    font-family: var(--font-display);
    font-size: 13px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rec-meta {
    font-size: 10px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rec-price {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--accent-lime);
    font-weight: 700;
    margin-top: 2px;
}
.upgrade-banner {
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-violet) 100%);
    border-radius: 24px;
    padding: 24px 20px;
    margin: 20px 20px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.upgrade-title {
    font-family: var(--font-display);
    font-size: 28px;
    color: white;
    letter-spacing: 0.06em;
}
.upgrade-sub {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.65;
    word-break: break-word;
}
.upgrade-btn {
    align-self: flex-start;
    margin-top: 8px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    border: none;
    border-radius: 100px;
    padding: 10px 22px;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.08em;
    cursor: pointer;
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════


/* ══════════════════════════════════════════════════════════════════════════════
   HOME PAGE — ADVERTISEMENT HERO BANNER
   Mobile-first, konsisten 20px horizontal padding
   ══════════════════════════════════════════════════════════════════════════════ */

.home-ad-hero {
    position: relative;
    overflow: hidden;
    min-height: 260px;
    display: flex;
    align-items: flex-end;
    margin-bottom: 0;
}
.home-ad-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}
.home-ad-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(8, 8, 16, 0.95) 0%,
        rgba(8, 8, 16, 0.5) 50%,
        rgba(8, 8, 16, 0.1) 100%
    );
}
.home-ad-hero-content {
    position: relative;
    z-index: 1;
    padding: 24px 20px;
    width: 100%;
}
.home-ad-hero-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.home-ad-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
}
.home-ad-chip--partnership {
    background: var(--accent-lime);
    color: var(--text-on-accent);
}
.home-ad-eyebrow {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 100px;
    padding: 4px 10px;
}
.home-ad-heading {
    font-family: var(--font-display);
    font-size: 44px;
    letter-spacing: 0.02em;
    color: #fff;
    line-height: 0.92;
    margin: 0 0 10px;
}
.home-ad-desc {
    font-family: var(--font-body);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.7;
    margin: 0 0 18px;
}
.home-ad-cta {
    display: inline-flex;
    align-items: center;
    padding: 11px 22px;
    background: var(--accent-lime);
    border: none;
    border-radius: 100px;
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: opacity 0.2s;
}
.home-ad-cta:hover {
    opacity: 0.88;
}

/* Modifier khusus mobile (selalu aktif di build mobile-only) */
.search-bar--mobile-only {
    display: flex;
}
.flash-card--mobile-only {
    display: flex;
}
.upgrade-banner--mobile-only {
    display: flex;
}

/* ── HOME SECTIONS ──────────────────────────────────────────────────────────── */
.home-section {
    margin-bottom: 4px;
}

.home-genre-section {
    padding: 28px 20px 0;
}
.home-trending-section {
    padding: 28px 20px 0;
}
.home-recommended-section {
    padding: 28px 20px 0;
}

.home-genre-heading {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    margin: 0;
}
.home-section-heading {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    margin: 0;
}
.home-trending-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.home-trending-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 100px;
    background: rgba(166, 217, 106, 0.1);
    border: 1px solid rgba(166, 217, 106, 0.22);
    color: var(--accent-lime);
    font-family: var(--font-body);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
}
.home-rec-sub {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    margin: 3px 0 0;
    letter-spacing: 0.02em;
}

/* ── GENRE GRID — horizontal scroll on mobile ─────────────────────────────── */
.home-genre-grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 16px 20px 4px;
    margin: 0 -20px;
    scrollbar-width: none;
}
.home-genre-grid::-webkit-scrollbar {
    display: none;
}
.home-genre-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: all 0.2s;
    color: var(--text-secondary);
}
.home-genre-card:hover {
    background: var(--bg-card-hover);
    border-color: rgba(166, 217, 106, 0.2);
    color: var(--text-primary);
}
.home-genre-card--active {
    background: rgba(166, 217, 106, 0.08);
    border-color: rgba(166, 217, 106, 0.28);
    color: var(--accent-lime);
}
.home-genre-icon {
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}
.home-genre-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: inherit;
    text-align: center;
}

/* ── HOME EVENT GRID — 2 col responsive ──────────────────────────────────── */
.home-event-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 20px;
    margin-top: 16px;
}
@media (max-width: 360px) {
    .home-event-grid {
        grid-template-columns: 1fr;
    }
}

/* ── HOME NEWSLETTER — mobile vertical stack ──────────────────────────────── */
.home-newsletter {
    margin: 28px 20px 32px;
    background: var(--bg-card);
    border-radius: 20px;
    border: 1px solid var(--border-soft);
    padding: 28px 20px;
}
.home-newsletter-heading {
    font-family: var(--font-display);
    font-size: 28px;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    margin: 0 0 8px;
    line-height: 1.05;
}
.home-newsletter-sub {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 20px;
    line-height: 1.7;
}
.home-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.home-newsletter-input {
    width: 100%;
    padding: 13px 18px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 100px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.home-newsletter-input:focus {
    border-color: rgba(79, 107, 255, 0.5);
}
.home-newsletter-input::placeholder {
    color: var(--text-muted);
}
.home-newsletter-btn {
    width: 100%;
    padding: 13px;
    background: var(--accent-lime);
    border: none;
    border-radius: 100px;
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: opacity 0.2s;
}
.home-newsletter-btn:hover {
    opacity: 0.9;
}

/* ══════════════════════════════════════════════════════════════════════════════
   EXPLORE PAGE — SHARED EventCard (explore-event-card-v2)
   Used on both Home and Explore pages via shared EventCard component
   ══════════════════════════════════════════════════════════════════════════════ */

/* Baris chip kategori — halaman Jelajahi mobile */
.chip-row--mobile-only {
    display: flex;
    gap: 8px;
    padding: 0 20px 12px;
    overflow-x: auto;
    scrollbar-width: none;
}
.chip-row--mobile-only::-webkit-scrollbar {
    display: none;
}

/* Results header */
.explore-results-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 0 20px;
}
.explore-results-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.explore-results-eyebrow {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--accent-lime);
    display: block;
}
.explore-results-count {
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
}
.explore-results-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.explore-sort-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
}
.explore-sort-label {
    white-space: nowrap;
}
.explore-sort-select-v2 {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}
.explore-sort-chevron {
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Iklan full-width — sembunyikan di mobile */
.explore-sponsored-fullwidth {
    display: none;
}

/* Two-column event grid */
.explore-events-grid-v2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 20px 24px;
}
@media (max-width: 360px) {
    .explore-events-grid-v2 {
        grid-template-columns: 1fr;
    }
}

/* Grid event beranda (2 kolom, gaya marketplace) */
.events-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 20px 24px;
}

/* Shared EventCard — wraps images + body */
.explore-event-card-v2 {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    transition:
        transform 0.18s,
        box-shadow 0.18s,
        border-color 0.18s;
}
.explore-event-card-v2:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    border-color: rgba(166, 217, 106, 0.18);
}
.explore-ecard-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
}
.explore-ecard-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.explore-event-card-v2:hover .explore-ecard-img {
    transform: scale(1.04);
}
.explore-ecard-cat {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 7px;
    border-radius: 6px;
    background: rgba(8, 8, 16, 0.72);
    backdrop-filter: blur(4px);
    font-family: var(--font-body);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #fff;
}
.explore-ecard-body {
    padding: 12px 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.explore-ecard-title {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}
.explore-ecard-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
}
.explore-ecard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--border-soft);
}
.explore-ecard-price {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-lime);
}
.explore-ecard-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: all 0.18s;
}
.explore-event-card-v2:hover .explore-ecard-arrow {
    background: var(--accent-lime);
    color: var(--text-on-accent);
}

/* Show more */
.explore-show-more {
    display: flex;
    justify-content: center;
    padding: 16px 0 8px;
}
.explore-show-more-btn {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 11px 28px;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.2s;
}
.explore-show-more-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXPLORE PAGE — Full redesign with banner + waterfall cascade
   ═══════════════════════════════════════════════════════════════════════════ */

.exp-page {
    background: var(--bg-base);
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    min-height: 100dvh;
    position: relative;
}

/* ── Banner ── */
.exp-banner-wrap {
    margin: 12px 16px 0;
    border-radius: 16px;
    position: relative;
    /* cursor indicates draggable */
    cursor: grab;
}
.exp-banner-wrap:active {
    cursor: grabbing;
}
.exp-banner-shim {
    width: 100%;
    height: 180px;
    border-radius: 16px;
}
/* viewport clips overflowing slides — MUST have overflow:hidden */
.exp-banner-viewport {
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
}
/* track is a flex row as wide as (n * 100%) */
.exp-banner-track {
    display: flex;
    /* width set by content — each slide is 100% of viewport */
    will-change: transform;
}
/* each slide exactly fills the viewport width */
.exp-banner-slide {
    flex: 0 0 100%; /* don't grow, don't shrink, exactly 100% */
    width: 100%;
    min-width: 0;
}
.exp-banner-link {
    display: block;
    width: 100%;
    -webkit-user-drag: none;
}
.exp-banner-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    border-radius: 16px;
    pointer-events: none; /* prevent browser drag-image ghost */
    -webkit-user-drag: none;
}
.exp-banner-dots {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 10px;
    padding-bottom: 4px;
}
.exp-bdot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
    border: none;
    padding: 0;
    cursor: pointer;
    transition:
        background 0.2s,
        width 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.exp-bdot--on {
    background: var(--accent-lime);
    width: 20px;
    border-radius: 3px;
}

/* ── Hero section ── */
.exp-hero {
    overflow: hidden;
    max-height: 400px;
    transition:
        max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.3s ease;
    opacity: 1;
}
.exp-hero--collapsed {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}
.exp-hero-title-wrap {
    padding: 20px 20px 8px;
}
.exp-hero-title {
    font-family: var(--font-display);
    font-size: 52px;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: 0.02em;
    margin: 0 0 6px;
}
.exp-hero-dot {
    color: var(--accent-lime);
}
.exp-hero-sub {
    font-size: 13px;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
    margin: 0;
}

/* ── Search bar ── */
.exp-search-bar {
    padding: 12px 16px 0;
    transition: padding 0.3s ease;
    position: relative;
    z-index: 20;
}
.exp-search-bar--sticky {
    position: sticky;
    top: 0;
    background: var(--bg-base);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    z-index: 45; /* di bawah header (50) tapi di atas konten */
}
.exp-search-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    padding: 13px 16px;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}
.exp-search-inner:focus-within {
    border-color: var(--accent-lime);
    box-shadow: 0 0 0 3px rgba(166, 217, 106, 0.12);
}
.exp-search-inner svg {
    flex-shrink: 0;
    color: var(--text-muted);
}
.exp-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 14px;
}
.exp-search-input::placeholder {
    color: var(--text-muted);
}
.exp-search-clear {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}
.exp-search-clear:hover {
    color: var(--text-primary);
}

/* ── Category chips ── */
.exp-chips {
    display: flex;
    gap: 8px;
    padding: 14px 16px 6px;
    overflow-x: auto;
    scrollbar-width: none;
}
.exp-chips::-webkit-scrollbar {
    display: none;
}
.exp-chip {
    flex-shrink: 0;
    padding: 7px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    cursor: pointer;
    transition:
        background 0.15s,
        border-color 0.15s,
        color 0.15s,
        transform 0.1s;
}
.exp-chip:hover {
    border-color: var(--accent-lime);
    color: var(--text-primary);
}
.exp-chip--on {
    background: var(--accent-lime);
    border-color: var(--accent-lime);
    color: #16151d;
}
.exp-chip:active {
    transform: scale(0.95);
}

/* ── Results bar ── */
.exp-results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px 10px;
}
.exp-results-left {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.exp-results-eyebrow {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--accent-lime);
}
.exp-results-count {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}
.exp-results-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.exp-clear-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: rgba(255, 80, 80, 0.1);
    border: 1px solid rgba(255, 80, 80, 0.25);
    border-radius: 100px;
    color: #ff6b6b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background 0.15s;
}
.exp-clear-btn:hover {
    background: rgba(255, 80, 80, 0.18);
}

/* ==== page-lives.css ==== */
/* ═════════════════════════════════════════════════════════════════════════
   LIVES — daftar siaran langsung + feed swipe vertikal
   ═════════════════════════════════════════════════════════════════════════ */

.lives-page {
    max-width: 480px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lives-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--bg-page);
}

.lives-back,
.lives-refresh {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}
.lives-back:hover,
.lives-refresh:hover { background: var(--bg-elevated-2); }

.lives-title {
    flex: 1;
    font-family: var(--font-display);
    font-size: 20px;
    letter-spacing: 0.04em;
    color: var(--text-primary);
}

/* ── Status (loading / kosong / error) ─────────────────────────────────── */
.lives-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 16px;
    color: var(--text-muted);
}
.lives-status svg { opacity: 0.5; }
.lives-status-text {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}
.lives-spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: var(--live-green);
    animation: live-spin 0.8s linear infinite;
}

/* ── Grid kartu live ───────────────────────────────────────────────────── */
.lives-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-bottom: 90px;
}

.lives-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-card);
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    transition: transform 0.15s, border-color 0.15s;
}
.lives-card:hover { border-color: var(--live-green); }
.lives-card:active { transform: scale(0.97); }

.lives-card-thumb {
    position: relative;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 35%, var(--bg-elevated-2), var(--bg-card));
}

.lives-card-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--live-green);
    color: var(--text-on-accent);
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
}

.lives-card-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 100px;
    background: var(--danger);
    color: #fff;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
}
.lives-card-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: live-pulse 1.2s ease-in-out infinite;
}

.lives-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 12px 12px;
}
.lives-card-name {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lives-card-viewers {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
}

/* ── Feed fullscreen (swipe vertikal seperti app live lain) ────────────── */
.lives-feed {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: #000;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    overscroll-behavior: contain;
    scrollbar-width: none;
}
.lives-feed::-webkit-scrollbar { display: none; }

.lives-feed-close {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 14px);
    left: 14px;
    z-index: 210;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.lives-slide {
    height: 100dvh;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Viewer di dalam slide → immersive full-bleed, kontrol mengambang di atas video */
.lives-slide .live-viewer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
    background: #000;
    display: block;
}
.lives-slide .live-viewer-video-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}
.lives-slide .live-viewer-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lives-slide .live-viewer-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 24px 64px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent);
}
.lives-slide .live-viewer-merchant { color: #fff; }
.lives-slide .live-viewer-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    padding: 24px 16px calc(env(safe-area-inset-bottom, 0px) + 22px);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
}
.lives-slide .live-viewer-viewers { color: rgba(255, 255, 255, 0.9); }
.lives-slide .live-viewer-error {
    position: absolute;
    bottom: 90px;
    left: 16px;
    right: 16px;
    z-index: 6;
}

/* Placeholder slide non-aktif */
.lives-slide-ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.7);
}
.lives-ph-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--live-green);
    color: var(--text-on-accent);
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 700;
}
.lives-ph-name {
    font-family: var(--font-display);
    font-size: 18px;
    color: #fff;
}
.lives-ph-hint {
    font-family: var(--font-body);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

/* ==== page-merchant-event.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   MERCHANT CREATE / EDIT EVENT  (medit-*)
   Covers: MerchantCreateEventPage + MerchantEditEventPage
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Scope box-sizing ──────────────────────────────────────────────────── */
.medit-page,
.medit-page *,
.medit-page *::before,
.medit-page *::after {
    box-sizing: border-box;
}

/* ── Page shell ──────────────────────────────────────────────────────────── */
.medit-page {
    min-height: 100dvh;
    background: var(--bg-page);
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    position: relative;
    overflow-x: hidden;
    /* Pastikan footer fixed tidak terpotong oleh overflow */
    contain: layout paint;
}

/* ── Container (scrollable content area) ────────────────────────────────── */
.medit-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 16px 16px 100px; /* top padding since header is outside container */
    overflow-x: hidden;
    width: 100%;
    min-width: 0; /* Crucial: allow flex child to shrink below content size */
}

/* ── Header (standard page-header, sticky inside medit-page) ─────────────── */
.medit-page > .page-header,
.medit-page-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--bg-page);
    border-bottom: 1px solid var(--border-soft);
    width: 100%;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[data-theme="light"] .medit-page-header {
    background: var(--bg-page);
    border-bottom-color: var(--border);
}

/* ── Skeleton ─────────────────────────────────────────────────────────── */
.medit-skeleton {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* ── Section headers ─────────────────────────────────────────────────────── */
.medit-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(166, 217, 106, 0.12);
    margin-top: 4px;
    width: 100%;
    min-width: 0;
}
.medit-section-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.22em;
    color: var(--accent-lime);
    text-transform: uppercase;
    opacity: 0.85;
    white-space: nowrap;
}

/* ── Field groups ───────────────────────────────────────────────────────── */
.medit-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    min-width: 0;
}
.medit-field-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: var(--text-muted);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.medit-field-label--sale { color: var(--accent-lime); opacity: 0.9; }
.medit-section-hint {
    font-size: 10px;
    color: var(--text-muted);
    margin-left: 6px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.medit-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

/* ── Inputs ─────────────────────────────────────────────────────────────── */
.medit-input,
.medit-form-input,
.medit-form-select,
.medit-form-textarea {
    background: var(--bg-elevated);
    border: 1.5px solid var(--border-soft);
    border-radius: 12px;
    padding: 12px 14px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-body);
    outline: none;
    width: 100%;
    min-width: 0;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    appearance: none;
}
.medit-input:focus,
.medit-form-input:focus,
.medit-form-select:focus,
.medit-form-textarea:focus {
    border-color: rgba(166, 217, 106, 0.55);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px rgba(166, 217, 106, 0.1);
}
.medit-input::placeholder,
.medit-form-input::placeholder,
.medit-form-textarea::placeholder {
    color: var(--text-muted);
    font-size: 13px;
}
.medit-input[type="number"]::-webkit-outer-spin-button,
.medit-input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.medit-input[type="number"] { -moz-appearance: textfield; }
.medit-input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.5; cursor: pointer; filter: invert(0.8); }

.medit-textarea, .medit-form-textarea {
    min-height: 96px;
    resize: vertical;
    line-height: 1.6;
}

/* Input with trailing icon */
.medit-input-icon-row { 
    position: relative; 
    width: 100%;
    min-width: 0;
}
.medit-input-icon-row > .medit-input { padding-right: 40px; }
.medit-input-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    flex-shrink: 0;
}

/* Rp prefix input */
.medit-rp-input-wrap { 
    position: relative; 
    width: 100%;
    min-width: 0;
}
.medit-rp-prefix {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    pointer-events: none;
    z-index: 1;
}
.medit-input--rp { padding-left: 34px; }

/* ── Category grid ─────────────────────────────────────────────────────── */
.medit-category-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 2px 0;
    width: 100%;
}
.medit-checkbox-label {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 100px;
    border: 1.5px solid var(--border-soft);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-elevated);
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    user-select: none;
    -webkit-user-select: none;
    flex-shrink: 0;
    max-width: 100%;
}
.medit-checkbox-label:has(input:checked) {
    border-color: var(--accent-lime);
    color: var(--text-primary);
    background: rgba(166, 217, 106, 0.09);
}
.medit-checkbox-label input[type="checkbox"] {
    width: 13px;
    height: 13px;
    accent-color: var(--accent-lime);
    flex-shrink: 0;
    cursor: pointer;
    margin: 0;
}

/* ── Cover image (file input + preview) ───────────────────────────────── */
.medit-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}
.medit-cover-card { padding: 0 !important; overflow: hidden; }

.medit-change-img-btn {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent-lime);
    cursor: pointer;
    text-transform: uppercase;
    background: none;
    border: none;
    padding: 0;
}

.medit-banner-wrap {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 16/7;
    background: var(--bg-elevated);
    width: 100%;
}
.medit-banner-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.medit-banner-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 12px 14px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    display: flex; align-items: flex-end;
}
.medit-update-media-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(10px); border-radius: 8px; padding: 6px 12px;
    color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
    cursor: pointer; text-transform: uppercase; transition: background 0.15s;
    white-space: nowrap;
}
.medit-update-media-btn:hover { background: rgba(0,0,0,0.8); }
.medit-img-note { font-size: 11px; color: var(--warning-amber); margin: 0; }
.medit-cover-card .medit-img-note { padding: 10px 16px 12px; margin: 0; border-top: 1px solid var(--border-soft); }

/* Cover card with file upload */
.medit-cover-preview-wrap {
    position: relative; 
    width: 100%; 
    aspect-ratio: 16/9;
    background: var(--bg-elevated); 
    border-radius: 0; 
    overflow: hidden; 
    cursor: pointer;
}
.medit-cover-preview-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.medit-cover-overlay {
    position: absolute; inset: 0; background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.2s ease;
}
.medit-cover-preview-wrap:hover .medit-cover-overlay { opacity: 1; }
.medit-cover-change-btn {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3);
    color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 1px;
    border-radius: 8px; padding: 10px 18px; cursor: pointer; backdrop-filter: blur(6px); transition: background 0.15s;
    white-space: nowrap;
}
.medit-cover-change-btn:hover { background: rgba(255,255,255,0.25); }
.medit-cover-empty-label {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; width: 100%; height: 100%; cursor: pointer; transition: background 0.15s;
    padding: 24px;
}
.medit-cover-empty-label:hover { background: var(--bg-elevated-2); }
.medit-cover-empty-icon {
    width: 60px; height: 60px; border-radius: 16px;
    background: var(--bg-card); border: 1.5px dashed var(--border-strong);
    display: flex; align-items: center; justify-content: center; color: var(--text-muted); margin-bottom: 4px;
    flex-shrink: 0;
}
.medit-cover-empty-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.medit-cover-empty-sub { font-size: 12px; color: var(--text-muted); }
.medit-cover-upload-chip {
    display: flex; align-items: center; gap: 6px;
    background: var(--accent-lime); color: #16151d;
    font-size: 10px; font-weight: 800; letter-spacing: 1px;
    border-radius: 100px; padding: 6px 14px; margin-top: 6px;
    white-space: nowrap;
}
.medit-cover-file-input { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; overflow: hidden; }
.medit-cover-preview {
    margin-top: 8px; border-radius: 12px; overflow: hidden; aspect-ratio: 16/9;
    background: var(--bg-elevated); border: 1px solid var(--border-soft);
    width: 100%;
}
.medit-cover-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── File input (generic) ─────────────────────────────────────────────── */
.medit-file-input-wrapper {
    position: relative; 
    display: flex; 
    align-items: center; 
    gap: 10px;
    padding: 14px 16px; 
    border: 1.5px dashed var(--border-strong);
    border-radius: 12px; 
    background: var(--bg-elevated);
    cursor: pointer; 
    transition: border-color 0.15s, background 0.15s; 
    overflow: hidden;
    width: 100%;
    min-width: 0;
}
.medit-file-input-wrapper:hover { border-color: var(--accent-lime); background: rgba(166, 217, 106, 0.04); }
.medit-file-input { 
    position: absolute; 
    inset: 0; 
    width: 100%; 
    height: 100%; 
    opacity: 0; 
    cursor: pointer; 
    font-size: 0; 
}
.medit-file-input-label { 
    font-family: var(--font-body); 
    font-size: 10px; 
    font-weight: 800; 
    letter-spacing: 0.12em; 
    text-transform: uppercase; 
    color: var(--accent-lime); 
    pointer-events: none; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Variant cards ─────────────────────────────────────────────────────── */
.medit-variant-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    min-width: 0;
}
.medit-variant-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
}
.medit-variant-cat-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.medit-variant-delete-btn {
    width: 28px; 
    height: 28px; 
    border-radius: 8px;
    background: rgba(255, 79, 107, 0.1); 
    border: 1px solid rgba(255, 79, 107, 0.2);
    color: var(--danger); 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    transition: background 0.15s; 
    flex-shrink: 0;
    padding: 0;
}
.medit-variant-delete-btn:hover { background: rgba(255, 79, 107, 0.22); }

/* Big inline-editable name */
.medit-variant-name-input {
    background: transparent; 
    border: none;
    border-bottom: 1.5px solid var(--border-soft);
    padding: 2px 0 8px; 
    color: var(--text-primary);
    font-size: 19px; 
    font-weight: 800; 
    letter-spacing: -0.01em;
    font-family: var(--font-body); 
    outline: none; 
    width: 100%; 
    min-width: 0;
    transition: border-color 0.2s;
}
.medit-variant-name-input:focus { border-bottom-color: var(--accent-lime); }
.medit-variant-name-input::placeholder { color: var(--text-muted); font-weight: 600; font-size: 15px; }

.medit-sold-badge {
    display: inline-flex; 
    align-items: center; 
    gap: 5px;
    background: rgba(166, 217, 106, 0.07); 
    border: 1px solid rgba(166, 217, 106, 0.15);
    border-radius: 6px; 
    padding: 3px 8px; 
    font-size: 10px; 
    font-weight: 600; 
    color: var(--accent-lime); 
    width: fit-content;
    flex-shrink: 0;
}

/* Active toggle row at bottom of variant card */
.medit-active-row {
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    padding-top: 8px; 
    border-top: 1px solid var(--border-soft); 
    margin-top: 2px;
    width: 100%;
    min-width: 0;
    gap: 12px;
}

/* Add variant button (dashed outline row) */
.medit-add-variant-row {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 10px;
    width: 100%; 
    padding: 14px 16px;
    background: transparent; 
    border: 1.5px dashed rgba(166, 217, 106, 0.35);
    border-radius: 14px; 
    color: var(--accent-lime);
    font-family: var(--font-body); 
    font-size: 11px; 
    font-weight: 800;
    letter-spacing: 0.14em; 
    text-transform: uppercase;
    cursor: pointer; 
    transition: background 0.15s, border-color 0.15s;
    appearance: none;
    -webkit-appearance: none;
}
.medit-add-variant-row:hover {
    background: rgba(166, 217, 106, 0.06);
    border-color: rgba(166, 217, 106, 0.6);
}
.medit-add-variant-row-icon {
    width: 26px; 
    height: 26px; 
    border-radius: 50%;
    background: var(--accent-lime); 
    color: #0a0a14;
    display: flex; 
    align-items: center; 
    justify-content: center;
    flex-shrink: 0; 
    transition: transform 0.15s;
}
.medit-add-variant-row:hover .medit-add-variant-row-icon { transform: scale(1.1); }

/* Empty variants placeholder */
.medit-variants-empty {
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 6px;
    padding: 28px 16px; 
    background: var(--bg-elevated);
    border: 1px dashed var(--border-soft); 
    border-radius: 14px; 
    text-align: center;
    width: 100%;
}
.medit-variants-empty p { font-size: 13px; color: var(--text-muted); margin: 0; }
.medit-add-variant-inline-btn {
    font-size: 12px; 
    font-weight: 700; 
    color: var(--accent-lime);
    background: none; 
    border: none; 
    cursor: pointer; 
    padding: 4px 0; 
    letter-spacing: 0.05em;
}

/* ── Banners (error / success) ─────────────────────────────────────────── */
.medit-error-banner {
    display: flex; 
    align-items: center; 
    gap: 8px;
    background: rgba(255, 79, 107, 0.1); 
    border: 1px solid rgba(255, 79, 107, 0.25);
    border-radius: 12px; 
    padding: 12px 14px; 
    color: var(--danger); 
    font-size: 13px; 
    font-weight: 500;
    animation: fadeUp 0.25s ease both;
    width: 100%;
    min-width: 0;
}
.medit-success-banner {
    display: flex; 
    align-items: center; 
    gap: 8px;
    background: rgba(166, 217, 106, 0.08); 
    border: 1px solid rgba(166, 217, 106, 0.25);
    border-radius: 12px; 
    padding: 12px 14px; 
    color: var(--accent-lime); 
    font-size: 13px; 
    font-weight: 500;
    animation: fadeUp 0.25s ease both;
    width: 100%;
    min-width: 0;
}

/* ── Sticky footer ──────────────────────────────────────────────────────── */
.medit-sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 480px;
    z-index: 50;
    padding: 12px 16px max(20px, env(safe-area-inset-bottom, 20px));
    background: var(--bg-page);
    border-top: 1px solid var(--border-soft);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-sizing: border-box;
}

/* ── Action bar (submit + cancel row) ──────────────────────────────────── */
.medit-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
    width: 100%;
}

/* Primary action — same visual weight as medit-update-btn */
.medit-submit-btn {
    width: 100%;
    padding: 15px 24px;
    background: var(--accent-lime);
    border: none;
    border-radius: 14px;
    color: #0a0a14;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    text-align: center;
    white-space: nowrap;
}
.medit-submit-btn:hover { opacity: 0.9; }
.medit-submit-btn:active { transform: scale(0.98); }
.medit-submit-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

/* Secondary / cancel */
.medit-cancel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 13px 24px;
    background: transparent;
    border: 1.5px solid var(--border-strong);
    border-radius: 14px;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    white-space: nowrap;
    text-align: center;
}
.medit-cancel-btn:hover {
    border-color: var(--border-soft);
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="light"] .medit-submit-btn { color: #fff; }
[data-theme="light"] .medit-cancel-btn {
    border-color: var(--border-strong);
    color: var(--text-secondary);
}
[data-theme="light"] .medit-cancel-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

/* Publish / Update button */
.medit-update-btn {
    width: 100%;
    max-width: 100%;
    padding: 15px 24px;
    background: var(--accent-lime);
    border: none;
    border-radius: 14px;
    color: #0a0a14;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    text-align: center;
    white-space: nowrap;
}
.medit-update-btn:hover { opacity: 0.9; }
.medit-update-btn:active { transform: scale(0.98); }
.medit-update-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

/* ── Detail image grid ─────────────────────────────────────────────────── */
.detail-img-grid { 
    display: grid; 
    gap: 7px; 
    width: 100%;
}
.detail-img-grid--3 { grid-template-columns: repeat(3, 1fr); }
.detail-img-grid--4 {
    display: flex; 
    flex-wrap: nowrap; 
    overflow-x: auto; 
    overflow-y: hidden;
    gap: 7px; 
    scroll-behavior: smooth; 
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
    width: 100%;
}
.detail-img-grid--4::-webkit-scrollbar { height: 3px; }
.detail-img-grid--4::-webkit-scrollbar-track { background: transparent; }
.detail-img-grid--4::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }
.detail-img-grid--4 > div { 
    flex-shrink: 0; 
    width: calc(25% - 5.25px); 
    aspect-ratio: 1; 
    min-width: calc(25% - 5.25px); 
}
.detail-image-caption { 
    font-size: 12px; 
    color: var(--text-muted); 
    margin: 0; 
    line-height: 1.5; 
}

/* ── mhub tier toggle (inside edit event) ──────────────────────────────── */
.mhub-tier-toggle { 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    cursor: pointer; 
    flex-shrink: 0;
}
.mhub-tier-check { 
    width: 14px; 
    height: 14px; 
    accent-color: var(--accent-lime); 
    cursor: pointer; 
    flex-shrink: 0;
    margin: 0;
}
.mhub-tier-toggle-label { 
    font-family: var(--font-body); 
    font-size: 9px; 
    letter-spacing: 0.1em; 
    color: var(--text-muted); 
    white-space: nowrap;
}

/* ── Light mode ─────────────────────────────────────────────────────────── */
[data-theme="light"] .medit-section-label { color: var(--accent-lime); }
[data-theme="light"] .medit-input,
[data-theme="light"] .medit-form-input,
[data-theme="light"] .medit-form-textarea { background: var(--bg-elevated); border-color: var(--border-strong); color: var(--text-primary); }
[data-theme="light"] .medit-input:focus { border-color: rgba(61, 102, 0, 0.5); box-shadow: 0 0 0 3px rgba(61, 102, 0, 0.1); }
[data-theme="light"] .medit-variant-card { background: var(--bg-elevated); border-color: var(--border); }
[data-theme="light"] .medit-variant-name-input { color: var(--text-primary); border-bottom-color: var(--border-strong); }
[data-theme="light"] .medit-variant-name-input:focus { border-bottom-color: var(--accent-lime); }
[data-theme="light"] .medit-checkbox-label { background: var(--bg-elevated); border-color: var(--border); color: var(--text-secondary); }
[data-theme="light"] .medit-checkbox-label:has(input:checked) { border-color: var(--accent-lime); background: rgba(61, 102, 0, 0.08); color: var(--text-primary); }
[data-theme="light"] .medit-file-input-wrapper { border-color: var(--border-strong); background: var(--bg-elevated); }
[data-theme="light"] .medit-file-input-wrapper:hover { border-color: var(--accent-lime); }
[data-theme="light"] .medit-add-variant-row { border-color: rgba(61, 102, 0, 0.35); color: var(--accent-lime); }
[data-theme="light"] .medit-add-variant-row:hover { background: rgba(61, 102, 0, 0.06); border-color: rgba(61, 102, 0, 0.6); }
[data-theme="light"] .medit-add-variant-row-icon { background: var(--accent-lime); color: #fff; }
[data-theme="light"] .medit-sticky-footer { background: var(--overlay-blur); border-color: var(--border); }
[data-theme="light"] .medit-update-btn { color: #fff; }
[data-theme="light"] .medit-rp-prefix { color: var(--text-secondary); }

/* ── Keyframes ──────────────────────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ═══════════════════════════════════════════════════════════════════════
   SHIMMER SKELETON
   ═══════════════════════════════════════════════════════════════════════ */

.medit-shimmer {
    background: linear-gradient(90deg,
        var(--bg-elevated) 0%,
        var(--bg-card) 35%,
        var(--bg-elevated) 70%);
    background-size: 220% 100%;
    border-radius: 8px;
    animation: shimmer-slide 1.3s infinite ease-in-out;
    position: relative;
    overflow: hidden;
}
.medit-shimmer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.025), transparent);
    animation: shimmer-gleam 1.3s infinite ease-in-out;
}
@keyframes shimmer-slide {
    0%   { background-position: 220% 0; }
    100% { background-position: -220% 0; }
}
@keyframes shimmer-gleam {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}

/* Size variants */
.medit-shimmer--section { height: 11px; width: 110px; border-radius: 3px; }
.medit-shimmer--input   { height: 48px; width: 100%; border-radius: 12px; }
.medit-shimmer--textarea{ height: 96px; width: 100%; border-radius: 12px; }
.medit-shimmer--cover   { height: 190px; width: 100%; border-radius: 12px; }
.medit-shimmer--chip    { height: 36px; width: 76px; border-radius: 100px; }
.medit-shimmer--square  { height: 0; padding-bottom: 100%; width: 100%; border-radius: 10px; }
.medit-shimmer--card    { height: 240px; width: 100%; border-radius: 16px; }
.medit-shimmer--btn     { height: 52px; width: 100%; border-radius: 14px; }

/* Layout helpers */
.medit-shimmer-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}
.medit-shimmer-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
}
.medit-shimmer-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    width: 100%;
}

/* Light mode shimmer */
[data-theme="light"] .medit-shimmer {
    background: linear-gradient(90deg,
        var(--bg-elevated) 0%,
        #e8e8e8 35%,
        var(--bg-elevated) 70%);
}
[data-theme="light"] .medit-shimmer::after {
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.03), transparent);
}

/* ═══════════════════════════════════════════════════════════════════
   EventStoryPreviewInline  .esp-*
   Inline 9:16 Instagram-frame preview di form Create Event
   ═══════════════════════════════════════════════════════════════════ */

.esp-section {
  margin-top: 8px;
  margin-bottom: 4px;
}

.esp-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  background: rgba(166, 217, 106, 0.08);
  border: 1px solid rgba(166, 217, 106, 0.25);
  border-radius: 100px;
  color: var(--accent-lime);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.esp-toggle-btn:hover {
  background: rgba(166, 217, 106, 0.14);
  border-color: rgba(166, 217, 106, 0.45);
}

.esp-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 14px;
}

/* Phone shell */
.esp-phone {
  position: relative;
  width: 180px;
  height: 320px;
  border-radius: 22px;
  overflow: hidden;
  background: #0d0d18;
  border: 2px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255,255,255,0.04);
  flex-shrink: 0;
}

/* Story progress bar simulasi */
.esp-progress-bar {
  position: absolute;
  top: 28px;
  left: 8px;
  right: 8px;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  z-index: 10;
  overflow: hidden;
}
.esp-progress-fill {
  width: 45%;
  height: 100%;
  background: #fff;
  border-radius: 2px;
}

/* Story header (avatar + username) */
.esp-story-header {
  position: absolute;
  top: 35px;
  left: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 10;
}
.esp-avatar-ring {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a6d96a, #00c6ff);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.esp-avatar-inner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1a1a2e;
}
.esp-username {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex: 1;
}
.esp-story-time {
  font-size: 9px;
  color: rgba(255,255,255,0.5);
}

/* Notch */
.esp-notch {
  position: absolute;
  top: 6px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
}
.esp-notch-time {
  font-size: 8px;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
}
.esp-notch-icons {
  display: flex;
  gap: 3px;
  color: rgba(255,255,255,0.6);
}

/* Canvas */
.esp-canvas {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Cover 70% */
.esp-cover-zone {
  position: relative;
  height: 70%;
  overflow: hidden;
  flex-shrink: 0;
}
.esp-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.esp-cover-empty {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255,255,255,0.03);
}
.esp-cover-empty span {
  font-size: 8px;
  color: rgba(255,255,255,0.3);
}
.esp-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}
.esp-sep {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    rgba(166, 217, 106,0) 0%,
    rgba(166, 217, 106,0.8) 50%,
    rgba(166, 217, 106,0) 100%
  );
}

/* Info panel 30% */
.esp-info {
  height: 30%;
  background: linear-gradient(to bottom, rgba(5,5,18,0.97), #0a0a1c);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 10px;
  text-align: center;
}

/* Badge */
.esp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(166, 217, 106,0.1);
  border: 1px solid rgba(166, 217, 106,0.3);
  border-radius: 100px;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent-lime);
}
.esp-badge-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-lime);
  box-shadow: 0 0 4px var(--accent-lime);
  flex-shrink: 0;
}

.esp-title {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  margin: 0;
}
.esp-title:empty::before,
.esp-title:has(:empty)  { opacity: 0.35; }

.esp-desc {
  font-size: 7px;
  color: rgba(255,255,255,0.6);
  line-height: 1.3;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  margin: 0;
}

.esp-cta {
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(166, 217, 106,0.8);
  margin-top: 2px;
}

/* Share button */
.esp-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--accent-lime);
  color: #0a0a1c;
  border: none;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.esp-share-btn:hover { opacity: 0.88; }
.esp-share-btn:active { transform: scale(0.97); }

/* Hint text */
.esp-hint {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
  padding: 0 16px;
}

/* Light theme overrides */
[data-theme="light"] .esp-phone {
  background: #1a1a2e;
}
[data-theme="light"] .esp-toggle-btn {
  color: var(--accent-lime);
}

/* ==== page-merchant-landing.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   PULSE LANDING PAGE  —  styles/page-pulse-landing.css
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page wrapper — ikuti ukuran .page standar ───────────────────────── */
.pl-page {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    background: var(--bg-page);
    min-height: 100dvh;
    color: var(--text-primary);
    font-family: var(--font-body);
    overflow-x: hidden;
}

/* ── Nav ────────────────────────────────────────────────────────────────── */
.pl-nav {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--bg-page);
    border-bottom: 1px solid var(--border-soft);
}
.pl-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
}
.pl-nav-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    color: var(--text-primary);
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.2s;
}
.pl-nav-back:hover {
    background: var(--bg-elevated-2);
}
.pl-nav-logo {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 4px;
}
.pl-nav-badge {
    font-family: var(--font-body);
    font-size: 8px;
    letter-spacing: 0.18em;
    color: var(--accent-lime);
    text-transform: uppercase;
    line-height: 1;
}
.pl-nav-title {
    font-family: var(--font-display);
    font-size: 20px;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    line-height: 1;
}
.pl-contact-btn {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.06em;
    padding: 8px 14px;
    border-radius: 20px;
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s;
    flex-shrink: 0;
}
.pl-contact-btn:hover {
    background: var(--bg-elevated);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.pl-hero {
    padding: 36px 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}
.pl-hero-tagline {
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin: 0;
}
.pl-hero-title {
    font-family: var(--font-display);
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: 0.02em;
    margin: 0;
    color: var(--text-primary);
}
.pl-hero-accent {
    color: var(--accent-lime);
    font-style: italic;
}
.pl-hero-sub {
    font-size: 11px;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 300px;
    margin: 0;
}
.pl-hero-ctas {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 4px;
}

/* ── CTA Buttons ────────────────────────────────────────────────────────── */
.pl-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.06em;
    padding: 13px 22px;
    border-radius: 40px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition:
        transform 0.18s,
        box-shadow 0.18s,
        background 0.18s;
    white-space: nowrap;
}
.pl-cta-btn--lime {
    background: var(--accent-lime);
    color: var(--text-on-accent);
    font-weight: 700;
}
.pl-cta-btn--lime:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(166, 217, 106, 0.3);
}
.pl-cta-btn--ghost {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
}
.pl-cta-btn--ghost:hover {
    background: var(--bg-elevated);
}

/* ── Hero visual ────────────────────────────────────────────────────────── */
.pl-hero-visual {
    position: relative;
    width: 100%;
    margin-top: 20px;
}
.pl-hero-img-wrap {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: #0b0b1a;
}
.pl-hero-img-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 100%, rgba(79, 107, 255, 0.18) 0%, transparent 65%);
    pointer-events: none;
    z-index: 1;
}
.pl-hero-concert {
    display: block;
    width: 100%;
    height: auto;
}
.pl-live-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    letter-spacing: 0.06em;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(8, 8, 16, 0.8);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}
.pl-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--live-green);
    box-shadow: 0 0 8px var(--live-green);
    animation: pl-pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pl-pulse-dot {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

/* ── Section label ──────────────────────────────────────────────────────── */
.pl-section-label {
    display: block;
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-lime);
    margin-bottom: 6px;
}

/* ── Features ───────────────────────────────────────────────────────────── */
.pl-features {
    padding: 44px 20px 8px;
}
.pl-features-header {
    text-align: center;
    margin-bottom: 24px;
}
.pl-features-sub {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}
.pl-feature-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pl-feature-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    transition:
        border-color 0.2s,
        background 0.2s;
}
.pl-feature-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-strong);
}
.pl-feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pl-icon--lime {
    background: rgba(166, 217, 106, 0.12);
    color: var(--accent-lime);
}
.pl-icon--blue {
    background: rgba(79, 107, 255, 0.15);
    color: var(--accent-blue);
}
.pl-icon--violet {
    background: rgba(124, 79, 255, 0.15);
    color: var(--accent-violet);
}
.pl-icon--pink {
    background: rgba(255, 107, 157, 0.15);
    color: var(--accent-pink);
}
.pl-feature-body {
    flex: 1;
    min-width: 0;
}
.pl-feature-title {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    margin: 0 0 5px;
}
.pl-feature-desc {
    font-size: 10px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

/* ── Calculator ─────────────────────────────────────────────────────────── */
.pl-calc {
    margin: 32px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
}
.pl-calc-header {
    padding: 22px 20px 0;
    text-align: center;
}
.pl-calc-sub {
    font-size: 11px;
    color: var(--text-secondary);
    margin: 0 0 14px;
}
.pl-calc-body {
    padding: 0 20px 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.pl-calc-badge {
    display: inline-flex;
    align-self: flex-start;
    font-size: 9px;
    letter-spacing: 0.14em;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(166, 217, 106, 0.1);
    border: 1px solid rgba(166, 217, 106, 0.3);
    color: var(--accent-lime);
}

/* Sliders */
.pl-slider-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pl-slider-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    color: var(--text-secondary);
    gap: 8px;
}
.pl-slider-label-row span:first-child {
    flex: 1;
}

/* Number input inline */
.pl-num-input-wrap {
    display: flex;
    align-items: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.pl-num-input-wrap:focus-within {
    border-color: var(--accent-lime);
    box-shadow: 0 0 0 2px rgba(166, 217, 106, 0.12);
}
.pl-num-prefix {
    font-size: 10px;
    color: var(--text-muted);
    padding: 0 5px 0 8px;
    user-select: none;
    white-space: nowrap;
}
.pl-num-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    width: 72px;
    padding: 6px 8px 6px 0;
    text-align: right;
    appearance: textfield;
}
.pl-num-input::-webkit-outer-spin-button,
.pl-num-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pl-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: var(--bg-elevated-2);
    outline: none;
    cursor: pointer;
}
.pl-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-lime);
    border: 2px solid var(--bg-page);
    box-shadow: 0 0 6px rgba(166, 217, 106, 0.45);
    cursor: pointer;
}
.pl-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent-lime);
    border: 2px solid var(--bg-page);
    cursor: pointer;
    border-style: solid;
}
.pl-slider-range {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: var(--text-muted);
}

/* Result card */
.pl-result-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pl-result-label {
    font-size: 8px;
    letter-spacing: 0.2em;
    color: var(--text-muted);
    text-transform: uppercase;
}
.pl-result-amount {
    font-family: var(--font-display);
    font-size: 34px;
    color: var(--accent-lime);
    letter-spacing: 0.02em;
    line-height: 1;
}
.pl-result-fees {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pl-fee-row {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-secondary);
}
.pl-fee-val {
    font-weight: 700;
    color: var(--text-primary);
}
.pl-fee-neg {
    color: var(--danger) !important;
}

/* ── Testimonial ────────────────────────────────────────────────────────── */
.pl-testimonial {
    padding: 0 20px 40px;
}
.pl-testi-card {
    background: linear-gradient(135deg, #1a1a40 0%, #0f0f28 100%);
    border: 1px solid rgba(124, 79, 255, 0.18);
    border-radius: 18px;
    padding: 26px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}
.pl-testi-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 2px solid rgba(124, 79, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-violet);
}
.pl-testi-quote {
    font-size: 11px;
    line-height: 1.75;
    color: var(--text-secondary);
    margin: 0;
    font-style: italic;
}
.pl-testi-author {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.pl-testi-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.04em;
}
.pl-testi-role {
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.pl-footer {
    background: var(--bg-surface);
    border-top: 1px solid var(--border-soft);
    padding: 32px 20px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
}
.pl-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}
.pl-footer-logo {
    font-family: var(--font-display);
    font-size: 26px;
    letter-spacing: 0.08em;
    color: var(--text-primary);
    display: block;
}
.pl-footer-desc {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
    max-width: 240px;
}
.pl-footer-links {
    display: flex;
    gap: 20px;
    list-style: none;
}
.pl-footer-link {
    font-size: 10px;
    color: var(--text-secondary);
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: color 0.2s;
}
.pl-footer-link:hover {
    color: var(--text-primary);
}
.pl-footer-copy {
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin: 0;
}

/* ==== page-merchant-live.css ==== */
/* ═════════════════════════════════════════════════════════════════════════
   MERCHANT LIVE — Go Live page + Live Stream Viewer
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Live button in merchant header ────────────────────────────────────── */
.mhub-live-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 100px;
    background: var(--live-green);
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: opacity 0.15s, transform 0.15s;
    flex-shrink: 0;
}
.mhub-live-btn:hover { opacity: 0.88; }
.mhub-live-btn:active { transform: scale(0.94); }

/* ── Merchant Live Page ────────────────────────────────────────────────── */
.merchant-live-page {
    max-width: 480px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

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

.mlive-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mlive-back-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.15s;
}
.mlive-back-btn:hover { background: var(--bg-elevated-2); }

.mlive-header-title {
    font-family: var(--font-display);
    font-size: 20px;
    letter-spacing: 0.04em;
    color: var(--text-primary);
}

.mlive-live-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 100px;
    background: var(--danger);
    color: #fff;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    animation: live-pulse-bg 2s ease-in-out infinite;
}

.mlive-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    animation: live-pulse 1.2s ease-in-out infinite;
}

@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@keyframes live-pulse-bg {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

/* ── Preview area ──────────────────────────────────────────────────────── */
.mlive-preview-area {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
}

.mlive-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mlive-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.5);
    color: var(--text-muted);
}
.mlive-overlay svg { opacity: 0.5; }

.mlive-overlay-text {
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

/* ── Stats row ─────────────────────────────────────────────────────────── */
.mlive-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.mlive-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mlive-stat-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-muted);
}

.mlive-stat-value {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

/* ── Error ─────────────────────────────────────────────────────────────── */
.mlive-error {
    background: rgba(255, 79, 107, 0.1);
    border: 1px solid rgba(255, 79, 107, 0.25);
    border-radius: 10px;
    padding: 10px 14px;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--danger);
}

/* ── Action buttons ────────────────────────────────────────────────────── */
.mlive-actions {
    display: flex;
    justify-content: center;
}

.mlive-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 36px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s, transform 0.15s;
}
.mlive-btn:active { transform: scale(0.95); }

.mlive-btn--start {
    background: var(--live-green);
    color: var(--text-on-accent);
    box-shadow: 0 0 30px rgba(75, 216, 143, 0.3);
}
.mlive-btn--start:hover { opacity: 0.9; }

.mlive-btn--stop {
    background: var(--danger);
    color: #fff;
    box-shadow: 0 0 20px rgba(255, 79, 107, 0.3);
}
.mlive-btn--stop:hover { opacity: 0.9; }

/* ── Tips ──────────────────────────────────────────────────────────────── */
.mlive-tips {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
}

.mlive-tips-title {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.mlive-tips-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mlive-tips-list li {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    padding-left: 16px;
    position: relative;
}

.mlive-tips-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-lime);
}

/* ── Mode streaming penuh layar (immersive, mirip app live lain) ────────── */
.merchant-live-page.is-streaming {
    max-width: none;
    padding: 0;
    gap: 0;
}

/* Header → overlay transparan di atas video */
.merchant-live-page.is-streaming .mlive-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 14px 16px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent);
    z-index: 70;
}
.merchant-live-page.is-streaming .mlive-header-title { color: #fff; }
.merchant-live-page.is-streaming .mlive-back-btn {
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.25);
}
/* Badge LIVE di header redundan saat fullscreen (sudah ada di overlay video) */
.merchant-live-page.is-streaming .mlive-header .mlive-live-badge { display: none; }

/* Video memenuhi seluruh layar */
.merchant-live-page.is-streaming .mlive-preview-area {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    aspect-ratio: auto;
    border: none;
    border-radius: 0;
    background: #000;
    z-index: 40;
}

/* Sembunyikan elemen non-esensial + bottom nav saat streaming */
.merchant-live-page.is-streaming .mlive-stats-row,
.merchant-live-page.is-streaming .mlive-tips { display: none; }
.merchant-live-page.is-streaming ~ .bottom-nav { display: none; }

/* Tombol STOP mengambang di bawah */
.merchant-live-page.is-streaming .mlive-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
    z-index: 70;
}
.merchant-live-page.is-streaming .mlive-error {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
    z-index: 70;
}

/* Overlay info (LIVE + viewer) di atas video */
.mlive-stream-overlay {
    position: absolute;
    top: 64px;
    left: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
    z-index: 60;
}
.mlive-stream-live {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 100px;
    background: var(--danger);
    color: #fff;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    animation: live-pulse-bg 2s ease-in-out infinite;
}
.mlive-stream-viewers {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
}

/* Toast sementara "{nama} telah join" (muncul sekali lalu hilang) */
.mlive-join-toast {
    position: absolute;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    padding: 8px 16px;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    animation: mlive-toast-in 0.25s ease;
}
@keyframes mlive-toast-in {
    from { opacity: 0; transform: translate(-50%, -6px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* ═════════════════════════════════════════════════════════════════════════
   LIVE STREAM VIEWER (embedded in event detail)
   ═════════════════════════════════════════════════════════════════════════ */

.live-viewer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
}

.live-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-elevated);
}

.live-viewer-merchant {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.04em;
    color: var(--text-primary);
}

.live-viewer-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 100px;
    background: var(--danger);
    color: #fff;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.live-viewer-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: live-pulse 1.2s ease-in-out infinite;
}

.live-viewer-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.live-viewer-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.live-viewer-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.78);
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.02em;
}

/* Overlay yang sekaligus tombol (klik di mana saja untuk gabung) */
.live-viewer-overlay--btn {
    border: none;
    width: 100%;
    cursor: pointer;
    transition: background 0.15s;
}
.live-viewer-overlay--btn:hover { background: rgba(0, 0, 0, 0.42); }
.live-viewer-overlay--btn:active { background: rgba(0, 0, 0, 0.6); }

.live-viewer-play {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--live-green);
    color: var(--text-on-accent);
    padding-left: 3px;
    box-shadow: 0 0 26px rgba(75, 216, 143, 0.45);
    transition: transform 0.15s;
}
.live-viewer-overlay--btn:hover .live-viewer-play { transform: scale(1.06); }

.live-viewer-spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--live-green);
    animation: live-spin 0.8s linear infinite;
}

@keyframes live-spin {
    to { transform: rotate(360deg); }
}

/* Section live di halaman detail event */
.ed-live-section .live-viewer {
    margin-top: 6px;
}

.live-viewer-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
}

.live-viewer-viewers {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
}

.live-viewer-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s, transform 0.15s;
}
.live-viewer-btn:active { transform: scale(0.94); }
.live-viewer-btn:disabled { opacity: 0.55; cursor: progress; }

.live-viewer-btn--join {
    background: var(--live-green);
    color: var(--text-on-accent);
}

.live-viewer-btn--leave {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.live-viewer-error {
    margin: 0 14px 10px;
    background: rgba(255, 79, 107, 0.1);
    border: 1px solid rgba(255, 79, 107, 0.2);
    border-radius: 8px;
    padding: 8px 12px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--danger);
}

/* ── Light theme adjustments ────────────────────────────────────────────── */
[data-theme="light"] .mlive-btn--start {
    box-shadow: 0 0 20px rgba(10, 112, 53, 0.2);
}
[data-theme="light"] .mlive-btn--stop {
    box-shadow: 0 0 20px rgba(188, 24, 48, 0.2);
}

/* ==== page-merchant.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   MERCHANT HUB PAGE
   Auto-extracted from styles.css — edit this file for page-specific styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   MERCHANT PAGE — MOBILE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */
.merchant-page {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}
.merchant-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
}
.merchant-brand-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.merchant-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
}
.merchant-title {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--text-primary);
    letter-spacing: 0.05em;
}

.merchant-stats {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.merchant-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 24px;
    padding: 20px;
}
.merchant-card--earnings {
    background: linear-gradient(145deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
}
.merchant-label {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.16em;
    display: block;
    margin-bottom: 8px;
}
.merchant-amount {
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    line-height: 1;
    margin-bottom: 12px;
}
.merchant-trend-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.merchant-trend {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--live-green);
    font-weight: 700;
}
.merchant-trend-meta {
    font-size: 10px;
    color: var(--text-muted);
}
.merchant-trend-meta--right {
    margin-left: auto;
}

.merchant-tile-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.merchant-tile {
    background: var(--bg-elevated);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.merchant-tile--accent {
    background: var(--accent-blue);
}
.merchant-tile--accent .merchant-label {
    color: rgba(255, 255, 255, 0.7);
}
.merchant-tile--accent .merchant-tile-value {
    color: #fff;
}
.merchant-tile-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}
.merchant-tile-value {
    font-family: var(--font-display);
    font-size: 32px;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    line-height: 1;
}

.merchant-velocity {
    margin: 0 16px 16px;
}
.merchant-section-title {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
}
.merchant-section-sub {
    font-size: 11px;
    color: var(--text-secondary);
    margin: 6px 0 14px;
    line-height: 1.6;
}
.merchant-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.merchant-tab {
    padding: 6px 16px;
    border-radius: 100px;
    background: var(--bg-elevated);
    border: none;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.2s;
}
.merchant-tab--active {
    background: var(--tab-active-bg);
    color: var(--tab-active-text);
    font-weight: 700;
}
.merchant-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 100px;
    padding: 10px 0 0;
}
.merchant-bar {
    flex: 1;
    background: var(--bg-elevated-2);
    border-radius: 4px 4px 0 0;
    min-height: 8px;
    transition: background 0.2s;
}
.merchant-bar--peak {
    background: var(--accent-lime);
}
.merchant-bar:hover {
    background: var(--accent-blue);
}

.merchant-recent {
    padding: 0 20px 100px;
}
.merchant-recent-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.merchant-link {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--accent-lime);
    letter-spacing: 0.1em;
    text-decoration: none;
    font-weight: 700;
}
.merchant-sale-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.merchant-sale {
    display: flex;
    align-items: center;
    gap: 14px;
}
.merchant-sale-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--bg-elevated-2) 0%, var(--accent-blue) 100%);
    flex-shrink: 0;
}
.merchant-sale-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.merchant-sale-event {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.merchant-sale-buyer {
    font-size: 11px;
    color: var(--text-secondary);
}
.merchant-sale-tier {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
.merchant-sale-amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.merchant-sale-price {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--accent-lime);
    font-weight: 700;
}
.merchant-sale-time {
    font-size: 10px;
    color: var(--text-muted);
}
/* Merchant Hub — tampilan mobile */
.mhub-mobile {
    display: block;
}
.mhub-brand {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 4px;
    color: var(--text-primary);
    text-decoration: none;
    padding: 0 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mhub-brand-sub {
    font-family: var(--font-body);
    font-size: 8px;
    letter-spacing: 0.18em;
    color: var(--text-muted);
    line-height: 1;
}

/* Sidebar nav */
.mhub-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mhub-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.2s;
    /* button reset */
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
}
.mhub-nav-item:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}
.mhub-nav-item--active {
    background: rgba(166, 217, 106, 0.1);
    color: var(--accent-lime);
    border: 1px solid rgba(166, 217, 106, 0.15);
}
.mhub-nav-item--active svg {
    stroke: var(--accent-lime);
}
.mhub-user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
}
.mhub-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
}
.mhub-user-avatar--photo {
    background: transparent;
    border-radius: 50%;
    overflow: hidden;
}
.mhub-user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}
.mhub-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.mhub-user-name {
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mhub-user-role {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--accent-lime);
    letter-spacing: 0.1em;
}
.mhub-page-title {
    font-family: var(--font-display);
    font-size: 40px;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    line-height: 1;
}
.mhub-page-sub {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.mhub-search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 10px 18px;
    min-width: 260px;
}
.mhub-search-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 12px;
    width: 100%;
}
.mhub-search-input::placeholder {
    color: var(--text-muted);
}
.mhub-search-wrap svg {
    color: var(--text-muted);
    flex-shrink: 0;
}
.mhub-notif-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}
.mhub-notif-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}
.mhub-create-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: var(--accent-blue);
    color: #fff;
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition:
        opacity 0.2s,
        transform 0.2s,
        box-shadow 0.2s;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(79, 107, 255, 0.35);
}
.mhub-create-btn:hover {
    opacity: 0.95;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(79, 107, 255, 0.45);
}
.mhub-create-btn svg {
    stroke: currentColor;
}

/* Card base */
.mhub-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 24px;
    padding: 24px;
}
.mhub-badge-pct {
    font-size: 13px;
    letter-spacing: 0.04em;
    line-height: 1;
}
.mhub-badge-sub {
    font-size: 8px;
    letter-spacing: 0.06em;
    opacity: 0.8;
    line-height: 1.2;
}
.mhub-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 120px;
}
.mhub-bar-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    gap: 4px;
}
.mhub-peak-label {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.08em;
    color: var(--accent-blue);
    white-space: nowrap;
    opacity: 0.9;
}
.mhub-bar {
    width: 100%;
    background: var(--bg-elevated);
    border-radius: 6px 6px 0 0;
    min-height: 8px;
    transition: background 0.2s;
}
.mhub-bar--peak {
    background: var(--accent-blue);
}
.mhub-bar:hover {
    background: var(--accent-lime);
    opacity: 0.8;
}

/* Chart outer wrapper with axis labels */
.mhub-chart-outer {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mhub-chart-axis {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mhub-axis-label {
    flex: 1;
    text-align: center;
    font-family: var(--font-body);
    font-size: 8px;
    color: var(--text-muted);
    letter-spacing: 0.08em;
}

/* Transactions card — row 2, col 1–2 */
.mhub-transactions-card {
    grid-column: 1;
    grid-row: 2;
}

/* Top events card — row 2, col 2 */
.mhub-events-card {
    grid-column: 2;
    grid-row: 2;
}

/* ── CARD HEADER ────────────────────────────────────────────────────────────── */
.mhub-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.mhub-card-title {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.06em;
    color: var(--text-primary);
}
.mhub-view-all {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-secondary);
    text-decoration: none;
    letter-spacing: 0.06em;
    transition: color 0.2s;
}
.mhub-view-all:hover {
    color: var(--accent-lime);
}
.mhub-more-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

/* ── TRANSACTIONS TABLE ─────────────────────────────────────────────────────── */
.mhub-table-wrap {
    overflow-x: auto;
}
.mhub-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.mhub-table th {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    text-align: left;
    padding: 0 12px 14px 0;
    border-bottom: 1px solid var(--border-soft);
    font-weight: 400;
}
.mhub-table td {
    padding: 14px 12px 14px 0;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-soft);
    vertical-align: middle;
}
.mhub-table tr:last-child td {
    border-bottom: none;
}
.mhub-td-id {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}
.mhub-customer {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mhub-customer-name {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
}
.mhub-customer-email {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
.mhub-td-amount {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 700;
    white-space: nowrap;
}

/* ── TOP EVENTS LIST ────────────────────────────────────────────────────────── */
.mhub-event-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.mhub-event-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.mhub-event-thumb {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--bg-elevated-2) 0%, var(--accent-blue) 100%);
    overflow: hidden;
}
.mhub-event-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mhub-event-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mhub-event-name {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mhub-event-meta {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}
.mhub-event-progress-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 2px;
}
.mhub-event-progress-bar {
    width: 100%;
    height: 4px;
    background: var(--bg-elevated);
    border-radius: 2px;
    overflow: hidden;
}
.mhub-event-progress-fill {
    height: 100%;
    background: var(--accent-lime);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.mhub-event-sold {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}

/* ── TRANSACTION STATUS BADGES ──────────────────────────────────────────────── */
.mhub-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.mhub-status-badge--paid {
    background: rgba(75, 216, 143, 0.1);
    color: var(--live-green);
    border: 1px solid rgba(75, 216, 143, 0.22);
}
.mhub-status-badge--pending {
    background: rgba(255, 173, 43, 0.1);
    color: var(--warning-amber);
    border: 1px solid rgba(255, 173, 43, 0.22);
}
.mhub-status-badge--refunded {
    background: rgba(255, 79, 107, 0.1);
    color: var(--danger);
    border: 1px solid rgba(255, 79, 107, 0.22);
}
.mhub-status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* ── CREATE EVENT MODAL ─────────────────────────────────────────────────────── */
.mhub-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 8, 16, 0.82);
    backdrop-filter: blur(8px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.mhub-modal {
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: 24px;
    padding: 32px;
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-height: 90dvh;
    overflow-y: auto;
}
.mhub-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mhub-modal-title {
    font-family: var(--font-display);
    font-size: 28px;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    line-height: 1;
}
.mhub-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}
.mhub-modal-close:hover {
    background: var(--bg-elevated-2);
    color: var(--text-primary);
}
.mhub-modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.mhub-form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mhub-form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.mhub-form-label {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--text-muted);
}
.mhub-form-input,
.mhub-form-select,
.mhub-form-textarea {
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.04em;
    outline: none;
    width: 100%;
    transition: border-color 0.2s;
}
.mhub-form-input:focus,
.mhub-form-select:focus,
.mhub-form-textarea:focus {
    border-color: rgba(166, 217, 106, 0.4);
}
.mhub-form-input::placeholder,
.mhub-form-textarea::placeholder {
    color: var(--text-muted);
}
.mhub-form-select {
    appearance: none;
    cursor: pointer;
}
.mhub-form-textarea {
    resize: vertical;
    min-height: 80px;
}
.mhub-modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid var(--border-soft);
}
.mhub-modal-cancel {
    padding: 12px 24px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 100px;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.2s;
}
.mhub-modal-cancel:hover {
    background: var(--bg-elevated-2);
    color: var(--text-primary);
}
.mhub-modal-submit {
    padding: 12px 28px;
    background: var(--accent-lime);
    border: none;
    border-radius: 100px;
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: opacity 0.2s;
}
.mhub-modal-submit:hover {
    opacity: 0.88;
}
.mhub-modal-submit:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.mhub-modal-cancel:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.mhub-form-error {
    margin-top: 10px;
    background: rgba(255, 80, 80, 0.1);
    border: 1px solid rgba(255, 80, 80, 0.25);
    border-radius: 10px;
    padding: 10px 14px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: #ff5050;
    letter-spacing: 0.04em;
}

/* ─── MOBILE SUB-PAGE TABS ──────────────────────────────────────────────────── */
.mhub-mobile-tabs {
    display: flex;
    gap: 0;
    padding: 0;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 4px;
    width: 100%;
    justify-content: stretch;
}
.mhub-mobile-tabs::-webkit-scrollbar {
    display: none;
}
.mhub-mtab {
    flex: 1;
    padding: 13px 0;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: -1px;
    text-align: center;
    white-space: nowrap;
}
.mhub-mtab:hover {
    color: var(--text-primary);
}
.mhub-mtab--active {
    color: var(--accent-lime);
    border-bottom-color: var(--accent-lime);
}

/* ─── TICKETS PAGE ──────────────────────────────────────────────────────────── */
.mhub-tickets {
    padding: 24px 36px 0;
}
.mhub-tstat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
}
.mhub-tstat-label {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    display: block;
    margin-bottom: 8px;
}
.mhub-tstat-value {
    font-family: var(--font-display);
    font-size: 28px;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    line-height: 1;
    display: block;
}
.mhub-tstat-change {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--live-green);
    display: block;
    margin-top: 4px;
}
.mhub-filter-tabs {
    display: flex;
    gap: 0;
    background: var(--bg-elevated);
    border-radius: 10px;
    padding: 4px;
}
.mhub-ftab {
    padding: 7px 14px;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    background: none;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.2s;
}
.mhub-ftab--active {
    background: var(--bg-card);
    color: var(--text-primary);
}
.mhub-ticket-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
}
.mhub-ticket-venue {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin-top: 2px;
}
.mhub-fill-bar-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mhub-fill-bar {
    width: 70px;
    height: 4px;
    background: var(--bg-elevated);
    border-radius: 2px;
    overflow: hidden;
}
.mhub-fill-bar-inner {
    height: 100%;
    border-radius: 2px;
    background: var(--accent-lime);
}
.mhub-fill-pct {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
}
.mhub-event-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.mhub-event-status-badge--live {
    background: rgba(75, 216, 143, 0.1);
    color: var(--live-green);
    border: 1px solid rgba(75, 216, 143, 0.22);
}
.mhub-event-status-badge--upcoming {
    background: rgba(79, 107, 255, 0.1);
    color: var(--accent-blue);
    border: 1px solid rgba(79, 107, 255, 0.22);
}
.mhub-event-status-badge--soldout {
    background: rgba(255, 79, 107, 0.1);
    color: var(--danger);
    border: 1px solid rgba(255, 79, 107, 0.22);
}
.mhub-ticket-action-btn {
    padding: 6px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.mhub-ticket-action-btn:hover {
    background: var(--bg-elevated-2);
    color: var(--text-primary);
}
.mhub-acard {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
}
.mhub-acard-title {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    margin-bottom: 20px;
    display: block;
}
.mhub-donut-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
}
.mhub-donut {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: conic-gradient(
        var(--accent-lime) 0% 42%,
        var(--accent-blue) 42% 80%,
        #b482ff 80% 100%
    );
    position: relative;
    flex-shrink: 0;
}
.mhub-donut::after {
    content: "";
    position: absolute;
    inset: 32px;
    border-radius: 50%;
    background: var(--bg-card);
}
.mhub-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    flex-direction: column;
}
.mhub-donut-center-label {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text-primary);
    line-height: 1;
}
.mhub-donut-center-sub {
    font-family: var(--font-body);
    font-size: 8px;
    color: var(--text-muted);
    letter-spacing: 0.1em;
}
.mhub-donut-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.mhub-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mhub-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.mhub-legend-name {
    font-size: 12px;
    color: var(--text-secondary);
    flex: 1;
}
.mhub-legend-pct {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-primary);
    font-weight: 700;
}
.mhub-traffic-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.mhub-traffic-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mhub-traffic-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mhub-traffic-name {
    font-size: 13px;
    color: var(--text-secondary);
}
.mhub-traffic-pct {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-primary);
    font-weight: 700;
}
.mhub-traffic-bar {
    width: 100%;
    height: 4px;
    background: var(--bg-elevated);
    border-radius: 2px;
    overflow: hidden;
}
.mhub-traffic-fill {
    height: 100%;
    border-radius: 2px;
}
.mhub-audience-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.mhub-audience-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mhub-audience-title {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 2px;
}
.mhub-audience-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mhub-audience-label {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    width: 64px;
    flex-shrink: 0;
}
.mhub-audience-bar {
    flex: 1;
    height: 6px;
    background: var(--bg-elevated);
    border-radius: 3px;
    overflow: hidden;
}
.mhub-audience-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--accent-lime);
}
.mhub-audience-val {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-secondary);
    width: 30px;
    text-align: right;
}
.mhub-gender-wrap {
    display: flex;
    gap: 0;
    border-radius: 8px;
    overflow: hidden;
    height: 28px;
}
.mhub-gender-male {
    background: var(--accent-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 9px;
    color: white;
    font-weight: 700;
}
.mhub-gender-female {
    background: rgba(255, 79, 107, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 9px;
    color: white;
    font-weight: 700;
}
.mhub-perf-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 80px;
    margin-top: 8px;
}
.mhub-perf-bar {
    flex: 1;
    background: var(--bg-elevated);
    border-radius: 3px 3px 0 0;
    transition: background 0.2s;
}
.mhub-perf-bar--peak {
    background: var(--accent-lime);
}
.mhub-perf-bar:hover {
    opacity: 0.8;
}
.mhub-perf-labels {
    display: flex;
    gap: 4px;
    margin-top: 5px;
}
.mhub-perf-label {
    flex: 1;
    text-align: center;
    font-family: var(--font-body);
    font-size: 7px;
    color: var(--text-muted);
}
.mhub-withdraw-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mhub-withdraw-title {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-muted);
}
.mhub-withdraw-submit {
    padding: 11px;
    background: var(--accent-lime);
    border: none;
    border-radius: 10px;
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: opacity 0.2s;
}
.mhub-withdraw-submit:hover {
    opacity: 0.88;
}
.mhub-history-title {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-muted);
}
.mhub-history-table {
    width: 100%;
    border-collapse: collapse;
}
.mhub-history-table th {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    text-align: left;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border);
}
.mhub-history-table td {
    padding: 14px 24px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 13px;
    color: var(--text-secondary);
}
.mhub-history-table tr:last-child td {
    border-bottom: none;
}
.mhub-settle-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
}
.mhub-settle-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.mhub-settle-bank {
    display: flex;
    align-items: center;
    gap: 16px;
}
.mhub-bank-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--accent-blue);
}
.mhub-bank-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mhub-bank-name {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 600;
}
.mhub-bank-num {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.08em;
}
.mhub-bank-holder {
    font-size: 12px;
    color: var(--text-secondary);
}
.mhub-settle-edit-btn {
    padding: 8px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.2s;
}
.mhub-settle-edit-btn:hover {
    background: var(--bg-elevated-2);
    color: var(--text-primary);
}
.mhub-scard {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
}
.mhub-scard-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-soft);
}
.mhub-scard-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-lime);
    flex-shrink: 0;
}
.mhub-scard-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.mhub-scard-sub {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    display: block;
}
/* Toggle switches */
.mhub-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-soft);
}
.mhub-toggle-row:last-child {
    border-bottom: none;
}
.mhub-toggle-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.mhub-toggle-label {
    font-size: 13px;
    color: var(--text-primary);
}
.mhub-toggle-desc {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-muted);
}
.mhub-toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.mhub-toggle-switch input {
    display: none;
}
.mhub-toggle-track {
    position: absolute;
    inset: 0;
    background: var(--bg-elevated);
    border-radius: 12px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.2s;
}
.mhub-toggle-switch input:checked + .mhub-toggle-track {
    background: var(--accent-lime);
    border-color: var(--accent-lime);
}
.mhub-toggle-track::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
}
.mhub-toggle-switch input:checked + .mhub-toggle-track::after {
    transform: translateX(20px);
}
.mhub-add-team-btn {
    width: 100%;
    padding: 10px;
    background: var(--bg-elevated);
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 8px;
}
.mhub-add-team-btn:hover {
    background: var(--bg-elevated-2);
    color: var(--text-primary);
}
/* Security */
.mhub-security-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mhub-security-btn {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}
.mhub-security-btn:hover {
    background: var(--bg-elevated-2);
    color: var(--text-primary);
}
.mhub-security-badge {
    margin-left: auto;
    padding: 3px 8px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.mhub-security-badge--on {
    background: rgba(75, 216, 143, 0.1);
    color: var(--live-green);
}
.mhub-security-badge--off {
    background: rgba(255, 79, 107, 0.1);
    color: var(--danger);
}

/* ══════════════════════════════════════════════════════════════════════════════
   REDESIGN — MERCHANT HUB PAGE  (pixel-matched to screenshot)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Page shell ─────────────────────────────────────────────────────────────── */
.merchant-page.mhub-mobile {
    padding-bottom: 80px;
    min-height: 100dvh;
    background: transparent;
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
.mhub-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--bg-base);
    position: sticky;
    top: 0;
    z-index: 60;
    border-bottom: 1px solid var(--border-soft);
}
.mhub-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mhub-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mhub-header-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.mhub-header-title {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 1px;
    color: var(--text-primary);
}
.mhub-bell-btn {
    position: relative;
    width: 38px;
    height: 38px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition:
        color 0.2s,
        background 0.2s;
}
.mhub-bell-btn:hover {
    color: var(--text-primary);
    background: var(--bg-elevated-2);
}
.mhub-bell-badge {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger);
    border: 2px solid var(--bg-base);
}

/* ── Revenue / Tickets stats strip ──────────────────────────────────────────── */
.mhub-stats-strip {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    margin: 14px 16px 0;
    overflow: hidden;
}
.mhub-stat-cell {
    padding: 14px 16px;
}
.mhub-stat-divider {
    width: 1px;
    background: var(--border);
}

.mhub-stat-label {
    display: block;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-bottom: 5px;
}
.mhub-stat-value {
    display: block;
    font-family: var(--font-display);
    font-size: 21px;
    letter-spacing: 0.3px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mhub-stat-trend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--live-green);
    margin-top: 5px;
}
.mhub-stat-capacity-bar {
    height: 4px;
    background: var(--bg-elevated);
    border-radius: 2px;
    overflow: hidden;
    margin: 6px 0 4px;
}
.mhub-stat-capacity-fill {
    height: 100%;
    background: var(--accent-blue);
    border-radius: 2px;
}

/* ── Tab bar ─────────────────────────────────────────────────────────────────── */
.mhub-mobile-tabs {
    display: flex;
    padding: 0 4px;
    margin-top: 14px;
    border-bottom: 1px solid var(--border-soft);
    overflow-x: auto;
    scrollbar-width: none;
}
.mhub-mobile-tabs::-webkit-scrollbar {
    display: none;
}
.mhub-mtab {
    flex: 1;
    padding: 10px 8px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    white-space: nowrap;
    transition:
        color 0.2s,
        border-color 0.2s;
}
.mhub-mtab--active {
    color: var(--accent-lime);
    border-bottom-color: var(--accent-lime);
}

/* ── Events section ──────────────────────────────────────────────────────────── */
.mhub-events-section {
    padding: 16px 16px 100px;
}

.mhub-events-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.mhub-events-title {
    font-family: var(--font-display);
    font-size: 26px;
    letter-spacing: 1px;
    color: var(--text-primary);
    margin: 0;
}
.mhub-events-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mhub-live-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--live-green);
}
.mhub-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--live-green);
    box-shadow: 0 0 0 0 rgba(75, 216, 143, 0.6);
    animation: mhub-pulse 1.6s ease-in-out infinite;
}
@keyframes mhub-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(75, 216, 143, 0.6);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(75, 216, 143, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(75, 216, 143, 0);
    }
}

/* FAB add button */
.mhub-new-event-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-blue);
    border: none;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(79, 107, 255, 0.4);
    transition:
        transform 0.2s,
        opacity 0.2s;
    flex-shrink: 0;
}
.mhub-new-event-btn:hover {
    transform: scale(1.08);
    opacity: 0.9;
}

/* ── Event card ──────────────────────────────────────────────────────────────── */
.mhub-event-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 16px;
    transition:
        border-color 0.2s,
        transform 0.15s;
}
.mhub-event-card:hover {
    border-color: var(--border-strong);
}

/* Image area */
.mhub-event-card-img-wrap {
    position: relative;
    overflow: hidden;
}
.mhub-event-card-img {
    width: 100%;
    aspect-ratio: 16 / 8;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.mhub-event-card:hover .mhub-event-card-img {
    transform: scale(1.02);
}

/* Status badge — sits on image */
.mhub-event-status {
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    border-radius: 100px;
    padding: 4px 12px;
    pointer-events: none;
}
.mhub-event-status--sale {
    background: var(--accent-lime);
    color: var(--text-on-accent);
}
.mhub-event-status--sold {
    background: rgba(20, 20, 36, 0.85);
    color: var(--text-secondary);
    border: 1px solid var(--border-strong);
}
.mhub-event-status--presale {
    background: var(--accent-violet);
    color: #fff;
}

/* Body */
.mhub-event-card-body {
    padding: 14px 14px 12px;
}

.mhub-event-card-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.mhub-event-card-title {
    font-family: var(--font-display);
    font-size: 19px;
    letter-spacing: 0.4px;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}
.mhub-event-card-price-block {
    text-align: right;
    flex-shrink: 0;
}
.mhub-event-price-label {
    display: block;
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.mhub-event-price-value {
    display: block;
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.3px;
    color: var(--text-primary);
    white-space: nowrap;
}

.mhub-event-card-meta {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-secondary);
    margin: 0 0 12px;
}

/* Progress */
.mhub-event-progress-section {
    margin-bottom: 12px;
}
.mhub-event-progress-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.mhub-event-progress-key {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.mhub-event-progress-val {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}
.mhub-event-progress-val--sold {
    color: var(--live-green);
    font-weight: 700;
}

.mhub-event-progress-bar {
    height: 5px;
    background: var(--bg-elevated);
    border-radius: 3px;
    overflow: hidden;
}
.mhub-event-progress-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--accent-blue);
    transition: width 0.6s ease;
}
.mhub-event-progress-fill--lime {
    background: var(--accent-lime);
}
.mhub-event-progress-fill--sold {
    background: var(--live-green);
}

/* Two-row progress (Early Bird / next tier) */
.mhub-event-progress-bar--thin {
    height: 4px;
    margin-bottom: 4px;
}
.mhub-event-progress-bar--faint {
    height: 4px;
    background: var(--bg-elevated);
    border-radius: 3px;
    overflow: hidden;
    opacity: 0.45;
}

/* Actions row */
.mhub-event-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mhub-event-manage-btn {
    flex: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.06em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition:
        background 0.2s,
        border-color 0.2s;
}
.mhub-event-manage-btn:hover {
    background: var(--bg-elevated-2);
    border-color: var(--border-strong);
}

.mhub-event-icon-btn {
    width: 40px;
    height: 40px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition:
        background 0.2s,
        color 0.2s;
}
.mhub-event-icon-btn:hover {
    background: var(--bg-elevated-2);
    color: var(--text-primary);
}

/* ── Empty state (no events yet) ─────────────────────────────────────────────── */
.mhub-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 24px 32px;
    text-align: center;
}
.mhub-empty-icon-wrap {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    color: var(--accent-blue);
    position: relative;
}
.mhub-empty-icon-wrap::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px dashed rgba(79, 107, 255, 0.25);
    animation: mhub-empty-spin 12s linear infinite;
}
@keyframes mhub-empty-spin {
    to {
        transform: rotate(360deg);
    }
}

.mhub-empty-title {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 1px;
    color: var(--text-primary);
    margin: 0 0 8px;
}
.mhub-empty-body {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 260px;
    margin: 0 0 28px;
}
.mhub-empty-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    border: none;
    border-radius: 100px;
    padding: 13px 28px;
    cursor: pointer;
    transition:
        opacity 0.2s,
        transform 0.2s;
    box-shadow: 0 4px 20px rgba(166, 217, 106, 0.25);
}
.mhub-empty-cta:hover {
    opacity: 0.88;
    transform: scale(1.03);
}

.mhub-empty-tips {
    margin-top: 32px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mhub-empty-tip {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 12px 14px;
    text-align: left;
}
.mhub-empty-tip-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--accent-blue);
}
.mhub-empty-tip-title {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--text-primary);
    display: block;
    margin-bottom: 2px;
}
.mhub-empty-tip-sub {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    display: block;
    line-height: 1.5;
}

/* ── FAB fixed ───────────────────────────────────────────────────────────────── */
.mhub-fab {
    position: fixed;
    bottom: 88px;
    right: max(18px, calc(50vw - 240px + 18px));
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent-blue);
    border: none;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(79, 107, 255, 0.5);
    z-index: 40;
    transition:
        transform 0.2s,
        box-shadow 0.2s;
}
.mhub-fab:hover {
    transform: scale(1.07);
    box-shadow: 0 6px 28px rgba(79, 107, 255, 0.65);
}

/* ── Analytics / Finance / Settings re-use existing .merchant-card styles ───── */

/* ── Fix: merchant-velocity di dalam merchant-stats jangan double padding ── */
.merchant-stats .merchant-velocity {
    margin-left: 0;
    margin-right: 0;
}


/* ── Merchant Hub: kartu preview profil publik + editor ────────────────────── */
.mhub-profile-card { position: relative; border-bottom: 1px solid var(--border-soft); margin-bottom: 4px; }
/* Hero preview (reuse .mp-hero look). Tombol edit di kanan-atas hero. */
.mhub-phero { border-radius: 0; }
.mhub-edit-toggle { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.45); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; cursor: pointer; backdrop-filter: blur(4px); transition: background .15s; }
.mhub-edit-toggle:hover { background: rgba(0,0,0,.65); }

/* Form editor (muncul saat toggle) */
.mhub-edit-form { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; }
.mhub-form-msg { font-size: 13px; color: var(--accent-lime); margin: 10px 0 0; }

/* Tile upload gambar */
.mhub-upload-tile { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 6; border: 1px dashed var(--border); border-radius: 12px; background: var(--bg-elevated); overflow: hidden; cursor: pointer; }
.mhub-upload-tile:hover { border-color: var(--accent-lime); }
.mhub-upload-tile--logo { width: 92px; height: 92px; aspect-ratio: 1 / 1; border-radius: 50%; }
.mhub-upload-tile input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mhub-upload-prev { width: 100%; height: 100%; object-fit: cover; display: block; }
.mhub-upload-hint { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--text-muted); }
/* ==== page-messages.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   MESSAGES & CHAT PAGES
   Auto-extracted from styles.css — edit this file for page-specific styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   CHAT / MESSAGES PAGES — Design sesuai screenshot
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Messages list page ───────────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════════
   MESSAGES PAGE  /pulse
   ══════════════════════════════════════════════════════════════════════════════ */

.msg-page {
    padding-bottom: 80px;
    background: var(--bg-base);
    min-height: 100dvh;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    position: relative;
}

/* Header */
.msg-list-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--overlay-blur);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    /* relative so absolute title can center itself */
    position: sticky;
}
.msg-list-avatar-wrap {
    flex-shrink: 0;
}
.msg-list-avatar-placeholder {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}
.msg-list-avatar-img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}
.msg-list-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    white-space: nowrap;
    pointer-events: none;
}
.msg-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 6px;
    border-radius: 50%;
    transition: background 0.2s;
}
.msg-icon-btn:hover {
    background: var(--bg-elevated);
}

/* Search */
.msg-search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 16px;
    padding: 10px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
}
.msg-search-icon {
    color: var(--text-muted);
    flex-shrink: 0;
}
.msg-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
}
.msg-search-input::placeholder {
    color: var(--text-muted);
}

/* Conversation list */
.msg-convos-section {
    padding: 0 0 16px;
}
.msg-convos-label {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    padding: 14px 16px 8px;
}
.msg-convos-list {
    display: flex;
    flex-direction: column;
}
.msg-convo-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    transition: background 0.15s;
}
.msg-convo-row:hover {
    background: var(--bg-card-hover);
}
.msg-convo-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.msg-convo-avatar {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    object-fit: cover;
}
.msg-convo-live-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--live-green);
    border: 2px solid var(--bg-base);
    box-shadow: 0 0 6px var(--live-green);
    animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}
.msg-convo-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.msg-convo-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.msg-convo-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-convo-time {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
    letter-spacing: 0.04em;
}
.msg-convo-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
}
.msg-convo-preview {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.msg-convo-badge {
    min-width: 18px;
    height: 18px;
    border-radius: 100px;
    background: var(--accent-blue);
    color: #fff;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CHAT ROOM PAGE  /pulse/:id
   ══════════════════════════════════════════════════════════════════════════════ */

.chat-page {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    padding-bottom: 72px;
    background: var(--bg-page);
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    position: relative;
}

/* Header */
.chat-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--overlay-blur);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
}
.chat-back-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}
.chat-back-btn:hover {
    background: var(--bg-elevated);
}
.chat-header-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}
.chat-header-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chat-header-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-header-sub {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.chat-status-live {
    color: var(--live-green);
}
.chat-status-connecting {
    color: var(--text-muted);
}
.chat-header-actions {
    display: flex;
    gap: 4px;
}
.chat-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.chat-icon-btn:hover {
    background: var(--bg-elevated);
}

/* Messages area */
.chat-messages {
    flex: 1;
    padding: 16px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
}

/* Shimmer */
.chat-shimmer-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 0;
}
.chat-shimmer-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}
.chat-shimmer-row--self {
    flex-direction: row-reverse;
}
.chat-shimmer-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}
.chat-shimmer-bubble {
    border-radius: 18px;
    min-height: 44px;
}
.chat-shimmer-bubble--sm {
    width: 45%;
}
.chat-shimmer-bubble--md {
    width: 62%;
}
.chat-shimmer-bubble--lg {
    width: 74%;
    min-height: 60px;
}

/* Empty state */
.chat-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 60px 32px;
    text-align: center;
}
.chat-empty-icon {
    font-size: 44px;
}
.chat-empty-title {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--text-primary);
    letter-spacing: 0.05em;
}
.chat-empty-body {
    font-size: 13px;
    color: var(--text-muted);
    max-width: 240px;
    line-height: 1.6;
}

/* Rows */
.chat-row {
    display: flex;
    gap: 8px;
}
.chat-row--self {
    justify-content: flex-end;
}
.chat-row--other {
    align-items: flex-end;
}

/* Avatar inisial */
.chat-other-avatar-wrap {
    width: 36px;
    flex-shrink: 0;
}
.chat-other-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
}

/* Bubble */
.chat-bubble-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 75%;
}
.chat-bubble-wrap--self {
    align-items: flex-end;
}
.chat-sender-name {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    padding-left: 4px;
}
.chat-bubble {
    padding: 11px 15px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.55;
    word-break: break-word;
}
.chat-bubble-text {
    margin: 0 0 8px;
}
.chat-bubble--other {
    background: var(--bg-card);
    color: var(--text-primary);
    border-radius: 4px 18px 18px 18px;
    border: 1px solid var(--border-soft);
}
.chat-bubble--self {
    background: var(--accent-blue);
    color: #fff;
    border-radius: 18px 18px 4px 18px;
}
.chat-msg-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
}
.chat-msg-time {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}
.chat-msg-sent-icon {
    color: var(--accent-lime);
    display: flex;
}

/* Ticket card bubble */
.chat-ticket-card {
    margin-top: 8px;
    background: var(--bg-elevated);
    border: 1.5px solid var(--accent-lime);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.chat-ticket-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.chat-ticket-badge {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--accent-lime);
}
.chat-ticket-tier {
    background: var(--bg-card);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    border-radius: 100px;
}
.chat-ticket-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chat-ticket-event {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
.chat-ticket-venue {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
}
.chat-ticket-price {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}
.chat-ticket-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}
.chat-ticket-view-btn {
    background: var(--accent-lime);
    color: var(--text-on-accent);
    border: none;
    border-radius: 100px;
    padding: 7px 18px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: opacity 0.2s;
}
.chat-ticket-view-btn:hover {
    opacity: 0.85;
}

/* System message */
.chat-system-msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 4px 0;
}
.chat-system-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-muted);
}
.chat-system-bubble {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
    max-width: 85%;
    line-height: 1.5;
}

/* Error toast */
.chat-error-toast {
    position: fixed;
    bottom: 76px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(min(100%, 480px) - 32px);
    max-width: 448px;
    background: var(--danger);
    color: #fff;
    border-radius: 10px;
    padding: 10px 16px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    z-index: 30;
    animation: fadeInUp 0.25s ease;
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Input bar */
.chat-input-bar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--overlay-blur);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    z-index: 20;
}
.chat-input {
    flex: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 10px 16px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}
.chat-input:focus {
    border-color: rgba(79, 107, 255, 0.4);
}
.chat-input::placeholder {
    color: var(--text-muted);
}
.chat-input:disabled {
    opacity: 0.5;
}
.chat-input-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.2s;
}
.chat-input-icon-btn:hover {
    color: var(--text-secondary);
}
.chat-send-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 2px 12px rgba(79, 107, 255, 0.35);
    transition: opacity 0.2s;
}
.chat-send-btn:hover {
    opacity: 0.88;
}
.chat-send-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ══════════════════════════════════════════════════════════════════════════════
   REDESIGN — MESSAGES PAGE
   ══════════════════════════════════════════════════════════════════════════════ */

.msg-page {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--bg-base);
    padding-bottom: 80px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    position: relative;
}

/* Header */
.msg-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 12px;
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg-base);
    border-bottom: 1px solid var(--border-soft);
}
.msg-header-avatar-wrap {
    flex-shrink: 0;
}
.msg-header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent-blue);
}
.msg-avatar--placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 2px solid var(--accent-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}
.msg-header-title {
    flex: 1;
    font-family: var(--font-display);
    font-size: 24px;
    letter-spacing: 1px;
    color: var(--text-primary);
    margin: 0;
}
.msg-icon-btn {
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition:
        color 0.2s,
        background 0.2s;
}
.msg-icon-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

/* Search bar */
.msg-search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px;
}
.msg-search-icon {
    color: var(--text-muted);
    flex-shrink: 0;
}
.msg-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
}
.msg-search-input::placeholder {
    color: var(--text-muted);
}
.msg-search-filter-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    padding: 0;
}

/* Hot Stages — Live Now */
.msg-live-section {
    padding: 0 16px 16px;
}
.msg-live-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 14px;
}
.msg-live-eyebrow {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--accent-lime);
    margin: 0 0 2px;
}
.msg-live-title {
    font-family: var(--font-display);
    font-size: 28px;
    letter-spacing: 1px;
    color: var(--text-primary);
    margin: 0;
}
.msg-live-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--live-green);
    background: rgba(75, 216, 143, 0.08);
    border: 1px solid rgba(75, 216, 143, 0.2);
    border-radius: 100px;
    padding: 4px 10px;
    white-space: nowrap;
}
.msg-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--live-green);
    animation: pulse-dot 1.4s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

.msg-hot-stages-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.msg-hot-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 4/3;
    cursor: pointer;
}
.msg-hot-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.msg-hot-card:hover .msg-hot-card-img {
    transform: scale(1.04);
}
.msg-hot-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 40%, transparent);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 10px;
    gap: 3px;
}
.msg-hot-card-badge {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--accent-lime);
    opacity: 0.9;
}
.msg-hot-card-name {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.5px;
    color: #fff;
    line-height: 1.2;
}

/* Conversations list */
.msg-convos-section {
    padding: 0 16px;
}
.msg-convos-label {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin: 0 0 10px;
}
.msg-convo-list {
    display: flex;
    flex-direction: column;
}
.msg-convo-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-soft);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}
.msg-convo-row:hover {
    background: var(--bg-card);
}
.msg-convo-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.msg-convo-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}
.msg-convo-live-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--live-green);
    border: 2px solid var(--bg-base);
}
.msg-convo-body {
    flex: 1;
    min-width: 0;
}
.msg-convo-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.msg-convo-name {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-convo-time {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.msg-convo-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.msg-convo-preview {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-convo-badge {
    min-width: 20px;
    height: 20px;
    border-radius: 100px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    flex-shrink: 0;
}

/* FAB */
.msg-fab {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent-blue);
    border: none;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(79, 107, 255, 0.45);
    transition:
        transform 0.2s,
        box-shadow 0.2s;
    z-index: 40;
}
.msg-fab:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 28px rgba(79, 107, 255, 0.6);
}

/* ══════════════════════════════════════════════════════════════════════════════
   REDESIGN — CHAT ROOM PAGE
   ══════════════════════════════════════════════════════════════════════════════ */

/* Header */
.chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg-base);
    border-bottom: 1px solid var(--border-soft);
    backdrop-filter: blur(12px);
}
.chat-header-avatar-wrap {
    flex-shrink: 0;
}
.chat-header-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--border-strong);
}
.chat-header-info {
    flex: 1;
    min-width: 0;
}
.chat-header-name {
    display: block;
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-header-sub {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.08em;
}
.chat-status-live {
    color: var(--live-green);
}
.chat-status-connecting {
    color: var(--warning-amber);
}
.chat-header-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.chat-icon-btn {
    width: 34px;
    height: 34px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition:
        background 0.15s,
        color 0.15s;
}
.chat-icon-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

/* Ticket card inside bubble */
.chat-ticket-card {
    margin-top: 8px;
    background: var(--bg-elevated);
    border: 1px solid rgba(166, 217, 106, 0.3);
    border-left: 3px solid var(--accent-lime);
    border-radius: 12px;
    overflow: hidden;
}
.chat-ticket-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px 6px;
    border-bottom: 1px solid var(--border-soft);
}
.chat-ticket-badge {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--accent-lime);
    font-weight: 700;
}
.chat-ticket-tier {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-secondary);
    background: var(--bg-card);
    border-radius: 100px;
    padding: 2px 8px;
}
.chat-ticket-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    gap: 10px;
}
.chat-ticket-event {
    font-family: var(--font-display);
    font-size: 15px;
    color: var(--text-primary);
    margin: 0 0 2px;
}
.chat-ticket-venue {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-secondary);
    margin: 0 0 6px;
}
.chat-ticket-price {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--text-primary);
    margin: 0;
}
.chat-ticket-view-btn {
    background: var(--accent-lime);
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s;
}
.chat-ticket-view-btn:hover {
    opacity: 0.85;
}

/* Message meta (time + sent checkmark) */
.chat-msg-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}
.chat-msg-time {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
}
.chat-msg-sent-icon {
    color: var(--accent-blue);
    display: flex;
}

/* Input bar — emoji + attach + camera + send */
/* chat-input-bar defined below */
.chat-input-icon-btn {
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition:
        color 0.15s,
        background 0.15s;
}
.chat-input-icon-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}
.chat-input {
    flex: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 10px 16px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}
.chat-input:focus {
    border-color: var(--accent-blue);
}
.chat-input::placeholder {
    color: var(--text-muted);
}
.chat-input:disabled {
    opacity: 0.5;
}
.chat-send-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--accent-blue);
    border: none;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition:
        opacity 0.2s,
        transform 0.2s;
}
.chat-send-btn:hover:not(:disabled) {
    opacity: 0.85;
    transform: scale(1.05);
}
.chat-send-btn:disabled {
    background: var(--bg-elevated-2);
    cursor: not-allowed;
}

/* bubble-text inside ticket card wrapper */
.chat-bubble-text {
    margin: 0 0 8px;
}

/* ==== page-misc.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   ORDER CREATED & PAYMENT SUCCESS
   Auto-extracted from styles.css — edit this file for page-specific styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   ORDER CREATED PAGE  (.oc-*)
   ═══════════════════════════════════════════════════════════════════════════════ */

.oc-page {
    padding-bottom: 120px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    min-height: 100dvh;
    position: relative;
    background: var(--bg-page);
}

/* Hero */
.oc-hero {
    padding: 28px 20px 20px;
    text-align: center;
}
.oc-hero-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: #fff;
    box-shadow: 0 0 32px rgba(79, 107, 255, 0.4);
}
.oc-hero-title {
    font-family: var(--font-display);
    font-size: 48px;
    color: var(--text-soft-accent);
    letter-spacing: 0.04em;
    margin: 0 0 8px;
    line-height: 1;
}
.oc-hero-sub {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Main card */
.oc-card {
    margin: 4px 16px 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
}
.oc-card-header {
    background: linear-gradient(135deg, #0a1240 0%, #0d1a3a 50%, #040820 100%);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border-soft);
}
.oc-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-lime);
    box-shadow: 0 0 8px rgba(166, 217, 106, 0.8);
    animation: pulse-dot 1.6s infinite;
}
@keyframes pulse-dot {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(0.85);
    }
}
.oc-live-label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent-lime);
}
.oc-event-block {
    padding: 16px 16px 0;
}
.oc-event-name {
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--accent-blue);
    letter-spacing: 0.02em;
    line-height: 1.05;
    margin: 0;
    word-break: break-word;
}

/* Ticket section */
.oc-ticket-section {
    padding: 16px;
    border-bottom: 1px solid var(--border-soft);
}
.oc-section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.oc-section-head {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: var(--text-muted);
}
.oc-section-badge {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    border: 1px solid var(--color-primary-border);
    border-radius: 100px;
    padding: 3px 10px;
}
.oc-ticket-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-elevated);
    border-radius: 10px;
    margin-bottom: 6px;
}
.oc-ticket-name {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}
.oc-ticket-qty {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}
.oc-ticket-price {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Price section */
.oc-price-section {
    padding: 16px;
    border-bottom: 1px solid var(--border-soft);
}
.oc-price-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}
.oc-price-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
}
.oc-price-total-label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}
.oc-price-total-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.oc-price-total-amt {
    font-family: var(--font-display);
    font-size: 32px;
    color: var(--color-primary);
    letter-spacing: 0.02em;
    line-height: 1;
}
.oc-secure-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--live-green);
    background: rgba(75, 216, 143, 0.1);
    border: 1px solid rgba(75, 216, 143, 0.25);
    border-radius: 100px;
    padding: 4px 8px;
}

/* Meta section */
.oc-meta-section {
    padding: 16px;
}
.oc-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.oc-meta-label {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-body);
    letter-spacing: 0.06em;
}
.oc-meta-val {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 700;
}
.oc-expiry {
    color: var(--warning-amber) !important;
}
.oc-status-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--warning-amber);
}
.oc-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--warning-amber);
    box-shadow: 0 0 6px rgba(255, 173, 43, 0.7);
}

/* Pay section */
.oc-pay-section {
    margin: 20px 16px 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.oc-pay-head {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: var(--text-muted);
}
.oc-qr-wrap {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}
.oc-copy-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 13px;
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: 100px;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.08em;
    font-weight: 700;
    cursor: pointer;
    justify-content: center;
    transition:
        background 0.2s,
        color 0.2s;
}
.oc-copy-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}
.oc-or-divider {
    position: relative;
    width: 100%;
    text-align: center;
}
.oc-or-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-soft);
}
.oc-or-divider span {
    position: relative;
    background: var(--bg-card);
    padding: 0 12px;
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}
.oc-bank-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 15px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: 100px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 0.06em;
    font-weight: 700;
    cursor: pointer;
    justify-content: center;
    transition: background 0.2s;
}
.oc-bank-btn:hover:not(:disabled) {
    background: var(--bg-elevated-2);
}
.oc-bank-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.oc-terms {
    margin: 20px 16px 40px;
    font-size: 9px;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.6;
    letter-spacing: 0.03em;
}

/* Light theme overrides */
[data-theme="light"] .oc-hero-title {
    color: var(--accent-blue);
}
[data-theme="light"] .oc-event-name {
    color: var(--accent-blue);
}
[data-theme="light"] .oc-price-total-amt {
    color: var(--accent-blue);
}
[data-theme="light"] .oc-card-header {
    background: linear-gradient(135deg, #e0e8ff 0%, #ccd6f0 100%);
}
[data-theme="light"] .oc-live-label {
    color: var(--live-green);
}
[data-theme="light"] .oc-live-dot {
    background: var(--live-green);
}
[data-theme="light"] .oc-section-badge {
    color: var(--live-green);
    background: rgba(10, 112, 53, 0.08);
    border-color: rgba(10, 112, 53, 0.25);
}
[data-theme="light"] .oc-secure-badge {
    color: var(--live-green);
    background: rgba(10, 112, 53, 0.08);
    border-color: rgba(10, 112, 53, 0.25);
}
[data-theme="light"] .oc-qr-wrap {
    box-shadow: 0 4px 20px rgba(0, 0, 20, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PAYMENT SUCCESS PAGE  (.ps-*)
   ═══════════════════════════════════════════════════════════════════════════════ */

.ps-page {
    padding-bottom: 60px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    min-height: 100dvh;
    position: relative;
    background: var(--bg-page);
}

/* Hero */
.ps-hero {
    padding: 48px 20px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
}
.ps-check-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    box-shadow:
        0 0 60px var(--color-primary-glow),
        0 0 120px var(--color-primary-soft);
    animation: ps-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
@keyframes ps-pop {
    0% {
        transform: scale(0.4);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
.ps-check-inner {
    color: var(--color-primary-text);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ps-title {
    font-family: var(--font-display);
    font-size: 52px;
    color: var(--text-soft-accent);
    letter-spacing: 0.01em;
    margin: 0 0 10px;
    line-height: 1;
    animation: ps-slide-up 0.4s 0.15s ease both;
}
.ps-sub {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
    animation: ps-slide-up 0.4s 0.25s ease both;
}
@keyframes ps-slide-up {
    from {
        transform: translateY(12px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Event summary card */
.ps-card {
    margin: 0 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px;
    animation: ps-slide-up 0.4s 0.3s ease both;
}
.ps-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}
.ps-card-label {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--text-muted);
    display: block;
    margin-bottom: 6px;
}
.ps-card-event {
    font-family: var(--font-display);
    font-size: 34px;
    color: var(--text-soft-accent);
    letter-spacing: 0.01em;
    line-height: 1.05;
    margin-bottom: 12px;
    word-break: break-word;
}
.ps-card-date-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ps-card-date {
    font-size: 13px;
    color: var(--text-secondary);
    font-family: var(--font-body);
}
.ps-ticket-icon {
    flex-shrink: 0;
    color: var(--text-secondary);
}
.ps-card-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--border-soft);
}
.ps-card-price {
    font-family: var(--font-display);
    font-size: 30px;
    color: var(--color-primary);
    letter-spacing: 0.02em;
    line-height: 1;
}

/* Meta card */
.ps-meta-card {
    margin: 16px 16px 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 8px 0;
    animation: ps-slide-up 0.4s 0.38s ease both;
}
.ps-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
}
.ps-meta-divider {
    height: 1px;
    background: var(--border-soft);
    margin: 0 20px;
}
.ps-meta-label {
    font-size: 13px;
    color: var(--text-secondary);
}
.ps-meta-val {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}
.ps-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--live-green);
}
.ps-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--live-green);
    box-shadow: 0 0 8px rgba(75, 216, 143, 0.8);
    animation: pulse-dot 1.6s infinite;
}

/* CTA buttons */
.ps-actions {
    margin: 24px 16px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: ps-slide-up 0.4s 0.45s ease both;
}
.ps-primary-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 17px;
    background: var(--color-primary);
    color: var(--color-primary-text);
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s;
    box-shadow: 0 4px 20px var(--color-primary-glow);
}
.ps-primary-btn:hover {
    opacity: 0.88;
}
.ps-secondary-btn {
    width: 100%;
    padding: 17px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.2s;
}
.ps-secondary-btn:hover {
    background: var(--bg-elevated-2);
}

/* Light overrides */
[data-theme="light"] .ps-title {
    color: var(--accent-blue);
}
[data-theme="light"] .ps-card-event {
    color: var(--accent-blue);
}
[data-theme="light"] .ps-status {
    color: var(--live-green);
}
[data-theme="light"] .ps-status-dot {
    background: var(--live-green);
}

/* ==== page-notifications.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   NOTIFICATIONS PAGE
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Keyframes ────────────────────────────────────────────────────────────── */
/* pulse-dot uses its own animation to avoid conflict with base.css @keyframes pulse */
@keyframes pulse-dot {
    0%   { opacity: 1; transform: scale(1); }
    50%  { opacity: 0.5; transform: scale(1.3); }
    100% { opacity: 1; transform: scale(1); }
}

/* ── Notification List ──────────────────────────────────────────────────────── */
.notif-list {
    padding: 12px 20px 100px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.notif-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.notif-section-label {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.14em;
    padding-left: 4px;
}

/* ── Notification Card ──────────────────────────────────────────────────────── */
.notif-card {
    display: flex;
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 16px;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s, border-color 0.2s;
}

.notif-card:hover {
    background: var(--bg-card-hover);
    border-color: rgba(166, 217, 106, 0.18);
}

/* ── Icon ─────────────────────────────────────────────────────────────────── */
.notif-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notif-icon--alert {
    background: rgba(125, 167, 255, 0.12);
}

.notif-icon--success {
    background: rgba(166, 217, 106, 0.12);
}

.notif-icon--promo {
    background: rgba(183, 140, 255, 0.14);
}

.notif-icon--artist {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-lime));
    padding: 0;
}

.notif-avatar {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: linear-gradient(135deg, #ff6bff, var(--accent-lime));
}

/* ── Content ────────────────────────────────────────────────────────────────── */
.notif-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.notif-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.notif-title {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.2;
    flex: 1;
    min-width: 0;
}

.notif-time {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    flex-shrink: 0;
}

/* ── Pill ───────────────────────────────────────────────────────────────────── */
.notif-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 3px 9px;
    border-radius: 100px;
    flex-shrink: 0;
}

.notif-pill--live {
    background: var(--accent-lime);
    color: var(--text-on-accent);
}

.pulse-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--text-on-accent);
    animation: pulse-dot 1.4s infinite;
}

.pulse-dot--green {
    background: var(--live-green);
    box-shadow: 0 0 8px rgba(75, 216, 143, 0.6);
}

/* ── Body Text ──────────────────────────────────────────────────────────────── */
.notif-body {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}

.notif-body strong {
    color: var(--text-primary);
    font-weight: 600;
}

.notif-amount {
    color: var(--accent-lime);
    font-family: var(--font-body);
    font-weight: 700;
}

.notif-highlight {
    color: var(--accent-lime);
    font-weight: 600;
}

.notif-meta {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    margin-top: 2px;
}

/* ── CTA Button (Ghost) ───────────────────────────────────────────────────── */
.notif-cta {
    align-self: flex-start;
    margin-top: 6px;
    padding: 10px 18px;
    min-height: 40px;
    border-radius: 100px;
    background: transparent;
    border: 1.5px solid var(--accent-lime);
    color: var(--accent-lime);
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.08em;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.notif-cta:active { transform: scale(0.97); }

.notif-cta:hover {
    background: rgba(166, 217, 106, 0.12);
}

/* ── Empty State ────────────────────────────────────────────────────────────── */
.notif-empty-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 24px 80px;
    gap: 18px;
}

.notif-empty-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.notif-empty-bell-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1.5px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.notif-empty-bell-dot {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-lime);
    border: 2px solid var(--bg-page);
}

.notif-empty-title {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    margin: 0;
}

.notif-empty-body {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.65;
    max-width: 280px;
    margin: 0;
}

/* ── Empty State CTA (Solid Button) ───────────────────────────────────────── */
.notif-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: var(--accent-lime);
    color: #0a0a14;
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s;
    margin-top: 4px;
}

.notif-empty-cta:hover {
    opacity: 0.85;
}

/* ── Empty State Tips ───────────────────────────────────────────────────────── */
.notif-empty-tips {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 320px;
    margin-top: 8px;
}

.notif-empty-tip {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
    padding: 12px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
}

.notif-empty-tip-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(166, 217, 106, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-lime);
    flex-shrink: 0;
}

.notif-empty-tip-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notif-empty-tip-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}

.notif-empty-tip-sub {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .notif-cta {
    border-color: #5a8a00;
    color: #3d6600;
    background: rgba(166, 217, 106, 0.08);
}

[data-theme="light"] .notif-cta:hover {
    background: rgba(166, 217, 106, 0.18);
    border-color: #3d6600;
}

[data-theme="light"] .notif-empty-cta {
    color: #0a0a14;
}

[data-theme="light"] .notif-empty-tip-icon {
    background: rgba(61, 102, 0, 0.1);
    color: #3d6600;
}

[data-theme="light"] .notif-card:hover {
    border-color: rgba(61, 102, 0, 0.25);
}

[data-theme="light"] .notif-amount,
[data-theme="light"] .notif-highlight {
    color: #5a8a00;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NOTIFICATION DETAIL (nd-*)
   ═══════════════════════════════════════════════════════════════════════════ */
.nd-hero {
    padding: 40px 20px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.nd-check-ring {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    padding: 4px;
    background: conic-gradient(
        var(--accent-lime) 0deg,
        var(--accent-blue) 180deg,
        var(--accent-lime) 360deg
    );
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 50px rgba(166, 217, 106, 0.25);
}

.nd-check-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--accent-lime);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nd-eyebrow {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--accent-lime);
    letter-spacing: 0.16em;
}

.nd-title {
    font-family: var(--font-display);
    font-size: 38px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    line-height: 1;
}

.nd-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 320px;
    margin: 0;
}

.nd-subtitle strong {
    color: var(--accent-lime);
    font-weight: 600;
}

.nd-card {
    margin: 12px 20px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 24px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.nd-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.nd-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nd-cell--right {
    text-align: right;
    align-items: flex-end;
}

.nd-label {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.14em;
}

.nd-val {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
}

.nd-divider {
    height: 1px;
    background: var(--border-soft);
}

.nd-pay {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nd-pay-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(166, 217, 106, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nd-total {
    font-family: var(--font-display);
    font-size: 24px;
    color: var(--accent-lime);
    letter-spacing: 0.04em;
}

.nd-venue-card {
    margin: 0 20px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 24px;
    overflow: hidden;
}

.nd-venue-img {
    height: 130px;
    background: linear-gradient(
        135deg,
        var(--map-bg-1) 0%,
        var(--bg-elevated-2) 60%,
        var(--accent-blue) 100%
    );
    position: relative;
}

.nd-venue-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--map-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--map-grid) 1px, transparent 1px);
    background-size: 28px 28px;
}

.nd-venue-info {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nd-venue-name {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--text-primary);
    letter-spacing: 0.03em;
}

.nd-info-banner {
    margin: 0 20px 24px;
    background: rgba(166, 217, 106, 0.06);
    border: 1px solid rgba(166, 217, 106, 0.18);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.nd-info-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(166, 217, 106, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nd-info-banner p {
    font-size: 12px;
    color: var(--text-soft-accent);
    line-height: 1.6;
    margin: 0;
}

.nd-info-banner strong {
    color: var(--accent-lime);
    font-weight: 600;
}

.nd-cta-wrap {
    padding: 0 20px 32px;
}

.nd-cta-btn {
    width: 100%;
    padding: 16px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: 0.08em;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
}

.nd-cta-btn:hover {
    opacity: 0.9;
}

/* ── Light Mode Detail Overrides ───────────────────────────────────────────── */
[data-theme="light"] .nd-check-circle {
    color: #0a0a14;
}

[data-theme="light"] .nd-cta-btn {
    color: #0a0a14;
}

[data-theme="light"] .nd-total,
[data-theme="light"] .nd-eyebrow,
[data-theme="light"] .nd-subtitle strong,
[data-theme="light"] .nd-info-banner strong {
    color: #5a8a00;
}

[data-theme="light"] .nd-pay-icon {
    background: rgba(61, 102, 0, 0.12);
}


/* ═══════════════════════════════════════════════════════════════════════
   SHIMMER / SKELETON LOADING
   ═══════════════════════════════════════════════════════════════════════ */

@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.shimmer-bg {
    background: linear-gradient(
        90deg,
        var(--bg-elevated) 25%,
        var(--bg-card-hover) 50%,
        var(--bg-elevated) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.6s ease-in-out infinite;
    border-radius: 8px;
}

/* ── Shimmer Card ───────────────────────────────────────────────────────── */
.notif-card--shimmer {
    pointer-events: none;
    border-color: var(--border-soft);
}

.notif-card--shimmer .notif-content {
    gap: 10px;
}

.shimmer-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    flex-shrink: 0;
    background: linear-gradient(
        90deg,
        var(--bg-elevated) 25%,
        var(--bg-card-hover) 50%,
        var(--bg-elevated) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.6s ease-in-out infinite;
}

.shimmer-section-label {
    width: 60px;
    height: 10px;
    border-radius: 4px;
    margin-left: 4px;
    background: linear-gradient(
        90deg,
        var(--bg-elevated) 25%,
        var(--bg-card-hover) 50%,
        var(--bg-elevated) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.6s ease-in-out infinite;
    opacity: 0.6;
}

.shimmer-line {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(
        90deg,
        var(--bg-elevated) 25%,
        var(--bg-card-hover) 50%,
        var(--bg-elevated) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.6s ease-in-out infinite;
}

.shimmer-line--short {
    width: 40%;
    height: 14px;
    margin-bottom: 2px;
}

.shimmer-line--medium {
    width: 75%;
    height: 12px;
    opacity: 0.7;
}

.shimmer-line--long {
    width: 55%;
    height: 12px;
    opacity: 0.5;
}

/* Light mode shimmer override */
[data-theme="light"] .shimmer-icon,
[data-theme="light"] .shimmer-line,
[data-theme="light"] .shimmer-section-label {
    background: linear-gradient(
        90deg,
        #e8e8ec 25%,
        #f0f0f5 50%,
        #e8e8ec 75%
    );
    background-size: 200% 100%;
}


/* ═══════════════════════════════════════════════════════════════════════
   NOTIFICATION DETAIL — ENHANCEMENTS
   Append SETELAH page-notifications.css (override via cascade).
   Menambah: state ring (success/pending/media), status chip, animasi masuk,
   judul responsif, banner peringatan kedaluwarsa.
   ═══════════════════════════════════════════════════════════════════════ */

/* Palet lokal (tidak bergantung tema eksternal) */
.nd-hero,
.nd-card,
.nd-venue-card,
.nd-info-banner {
    --nd-amber: #ffb020;
    --nd-amber-soft: rgba(255, 176, 32, 0.14);
    --nd-amber-line: rgba(255, 176, 32, 0.30);
    --nd-amber-glow: rgba(255, 176, 32, 0.28);
}

/* ── Judul responsif (nama event panjang tidak overflow) ─────────────────── */
.nd-title {
    font-size: clamp(26px, 8vw, 38px);
    overflow-wrap: anywhere;
    max-width: 320px;
}

.nd-venue-name {
    overflow-wrap: anywhere;
}

/* ── Ring state: PENDING (amber) ─────────────────────────────────────────── */
.nd-check-ring--pending {
    background: conic-gradient(
        var(--nd-amber) 0deg,
        #ff8a3d 180deg,
        var(--nd-amber) 360deg
    );
    box-shadow: 0 0 50px var(--nd-amber-glow);
}

.nd-check-ring--pending .nd-check-circle {
    background: var(--nd-amber);
}

.nd-check-ring--pending + .nd-eyebrow,
.nd-eyebrow--pending {
    color: var(--nd-amber);
}

/* ── Ring state: MEDIA (foto story) ──────────────────────────────────────── */
.nd-check-ring--media {
    padding: 4px;
    background: conic-gradient(
        var(--accent-lime) 0deg,
        var(--accent-blue) 180deg,
        var(--accent-lime) 360deg
    );
}

.nd-media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* ── Status chip (ganti teks polos) ──────────────────────────────────────── */
.nd-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 3px 10px;
    border-radius: 100px;
    text-transform: uppercase;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: 1px solid var(--border-soft);
    width: fit-content;
}

.nd-status--ok {
    background: rgba(166, 217, 106, 0.12);
    color: var(--accent-lime);
    border-color: rgba(166, 217, 106, 0.28);
}

.nd-status--pending {
    background: var(--nd-amber-soft);
    color: var(--nd-amber);
    border-color: var(--nd-amber-line);
}

.nd-status--muted {
    background: var(--bg-elevated);
    color: var(--text-muted);
    border-color: var(--border-soft);
}

/* chip di sel kanan tetap rata kanan */
.nd-cell--right .nd-status {
    align-self: flex-end;
}

/* ── Banner peringatan (mis. batas waktu bayar) ──────────────────────────── */
.nd-info-banner--warn {
    background: var(--nd-amber-soft);
    border-color: var(--nd-amber-line);
}

.nd-info-banner--warn .nd-info-icon {
    background: var(--nd-amber-soft);
}

.nd-info-banner--warn p {
    color: var(--text-secondary);
}

.nd-info-banner--warn strong {
    color: var(--nd-amber);
}

/* ── Animasi masuk (stagger) ─────────────────────────────────────────────── */
@keyframes nd-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.nd-hero,
.nd-card,
.nd-venue-card,
.nd-info-banner,
.nd-cta-wrap {
    animation: nd-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.nd-card        { animation-delay: 0.06s; }
.nd-venue-card  { animation-delay: 0.12s; }
.nd-info-banner { animation-delay: 0.16s; }
.nd-cta-wrap    { animation-delay: 0.20s; }

@media (prefers-reduced-motion: reduce) {
    .nd-hero,
    .nd-card,
    .nd-venue-card,
    .nd-info-banner,
    .nd-cta-wrap {
        animation: none;
    }
}

/* ── Light mode ──────────────────────────────────────────────────────────── */
[data-theme="light"] .nd-check-ring--pending .nd-check-circle,
[data-theme="light"] .nd-check-circle {
    color: #0a0a14;
}

[data-theme="light"] .nd-status--ok {
    color: #5a8a00;
    border-color: rgba(61, 102, 0, 0.25);
}

[data-theme="light"] .nd-eyebrow--pending,
[data-theme="light"] .nd-check-ring--pending + .nd-eyebrow,
[data-theme="light"] .nd-status--pending,
[data-theme="light"] .nd-info-banner--warn strong {
    color: #9a6300;
}

/* ═══════════════════════════════════════════════════════════════════════
   NOTIFICATION DETAIL — STORY (media besar)
   Append SETELAH page-notifications.css + blok ENHANCEMENTS.
   ═══════════════════════════════════════════════════════════════════════ */

.nd-story {
    padding: 20px 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

/* Kartu media tinggi (story 9:16), dibatasi tinggi viewport */
.nd-story-media {
    position: relative;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 9 / 16;
    max-height: 68vh;
    border-radius: 26px;
    overflow: hidden;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.40);
}

.nd-story-media img,
.nd-story-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Gradient bawah hanya untuk foto (jangan menutupi kontrol video) */
.nd-story-media--img::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 38%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent);
    pointer-events: none;
}

.nd-story-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 0 20px;
}

.nd-story .nd-cta-wrap {
    width: 100%;
    padding-top: 6px;
}

[data-theme="light"] .nd-story-media {
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
}

@media (prefers-reduced-motion: no-preference) {
    .nd-story-media {
        animation: nd-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
}

/* ── Skeleton khusus story (kartu media tinggi) ──────────────────────────── */
.nd-skel-story-media {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 9 / 16;
    max-height: 68vh;
    border-radius: 26px;
}

/* ==== page-order-detail.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   ORDER DETAIL — Verification Page — page-order-detail.css
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page shell ─────────────────────────────────────────────────────────────── */
.vp-page { background: var(--bg-page); min-height: 100vh; }

/* ── Header ─────────────────────────────────────────────────────────────────── */
.vp-header { border-bottom: none !important; }
.vp-header-title {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ── Loading shimmer ─────────────────────────────────────────────────────────── */
.vp-loading {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.vp-shimmer {
    background: linear-gradient(90deg, var(--bg-card) 25%, rgba(255,255,255,0.04) 50%, var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: vp-shimmer 1.4s infinite;
    border-radius: 16px;
}
@keyframes vp-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.vp-shimmer--meta  { height: 64px; }
.vp-shimmer--qr    { height: 320px; }
.vp-shimmer--btn   { height: 52px; border-radius: 100px; }

/* ── Error state ─────────────────────────────────────────────────────────────── */
.vp-error {
    margin: 50px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}
.vp-error-icon { font-size: 36px; }
.vp-error-msg { font-size: 14px; color: var(--text-secondary); }
.vp-back-link { font-size: 13px; color: var(--accent-blue); text-decoration: none; }

/* ── Content wrapper ─────────────────────────────────────────────────────────── */
.vp-content {
    padding: 8px 20px 60px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ── ORDER ID + TIME REMAINING ───────────────────────────────────────────────── */
.vp-meta-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.vp-meta-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vp-meta-block--right { align-items: flex-end; }
.vp-meta-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.vp-order-code {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 2px;
    color: var(--accent-blue);
}
.vp-timer {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-display);
    font-size: 26px;
    letter-spacing: 2px;
    color: var(--accent-lime, #a6d96a);
    font-variant-numeric: tabular-nums;
}
.vp-timer svg { color: var(--accent-lime, #a6d96a); flex-shrink: 0; }

/* ── Status badge ────────────────────────────────────────────────────────────── */
.vp-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    width: fit-content;
}
.vp-status-badge--pending {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-primary);
}
.vp-status-badge--paid {
    background: rgba(75, 216, 143,0.12);
    border: 1px solid rgba(75, 216, 143,0.25);
    color: #4bd88f;
}
.vp-status-badge--cancelled {
    background: rgba(255,80,80,0.1);
    border: 1px solid rgba(255,80,80,0.2);
    color: #ff8a65;
}
.vp-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-lime, #a6d96a);
    flex-shrink: 0;
    animation: vp-pulse 2s infinite;
}
.vp-status-badge--paid    .vp-status-dot { background: #4bd88f; animation: none; }
.vp-status-badge--cancelled .vp-status-dot { background: #ff8a65; animation: none; }
@keyframes vp-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}

/* ── QR card ─────────────────────────────────────────────────────────────────── */
.vp-qr-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.vp-qr-card-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.vp-qr-logo {
    width: 34px;
    height: 34px;
    background: #16151d;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vp-gpn-label {
    font-size: 11px;
    font-weight: 700;
    color: #16151d;
    letter-spacing: 0.1em;
}

/* Dark container for QR code with glow */
.vp-qr-container {
    width: 100%;
    background: #16151d;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 200px;
}
.vp-qr-glow {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: radial-gradient(ellipse at center,
        rgba(79, 107, 255, 0.18) 0%,
        rgba(124, 79, 255, 0.12) 40%,
        transparent 70%);
    pointer-events: none;
}
.vp-qr-inner {
    position: relative;
    z-index: 1;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(79, 107, 255, 0.35), 0 0 60px rgba(124, 79, 255, 0.2);
}

.vp-scan-label {
    font-size: 11px;
    font-weight: 600;
    color: #999;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
}

/* ── Paid card ───────────────────────────────────────────────────────────────── */
.vp-paid-card {
    background: rgba(75, 216, 143,0.06);
    border: 1px solid rgba(75, 216, 143,0.18);
    border-radius: 20px;
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}
.vp-paid-icon { margin-bottom: 4px; }
.vp-paid-title {
    font-family: var(--font-display);
    font-size: 28px;
    letter-spacing: 1px;
    color: var(--text-primary);
}
.vp-paid-method {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
}
.vp-paid-date {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    margin: 0;
}
.vp-view-ticket-btn {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    padding: 11px 28px;
    border-radius: 100px;
    background: rgba(79,107,255,0.18);
    color: #8aabff;
    border: 1px solid rgba(79,107,255,0.3);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s;
}
.vp-view-ticket-btn:hover { opacity: 0.85; }

/* ── Total Payment ───────────────────────────────────────────────────────────── */
.vp-total-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}
.vp-total-label {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.vp-total-amount {
    font-family: var(--font-display);
    font-size: 40px;
    letter-spacing: 1px;
    color: var(--text-primary);
    line-height: 1;
}

/* ── Save QR button ──────────────────────────────────────────────────────────── */
.vp-save-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    border-radius: 100px;
    background: linear-gradient(135deg, #5b7cff 0%, #7c5fff 100%);
    color: #fff;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: opacity 0.18s ease, transform 0.12s ease;
}
.vp-save-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.vp-save-btn:active { transform: translateY(0); opacity: 1; }

/* ── How to Pay card ─────────────────────────────────────────────────────────── */
.vp-howto-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    padding: 18px 18px 20px;
}
.vp-howto-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: var(--text-primary);
}
.vp-howto-header svg { color: var(--text-secondary); }
.vp-howto-title {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.vp-howto-steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.vp-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.vp-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent-lime, #a6d96a);
    color: #16151d;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.vp-step-text {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}
.vp-step-italic { font-style: italic; }

/* ── Secure footer ───────────────────────────────────────────────────────────── */
.vp-secure-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding-bottom: 8px;
}
.vp-secure-footer svg { opacity: 0.5; }

/* ==== page-order-tickets.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   YOUR TICKETS PAGE — page-order-tickets.css
   Design: dark bg, bold event title, per-ticket cards with left accent bar,
   concert pulse strip at bottom.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page ────────────────────────────────────────────────────────────────────── */
.yt-page {
    background: var(--bg-page);
    min-height: 100vh;
    padding-bottom: 0;
}

/* ── Header ──────────────────────────────────────────────────────────────────── */
.yt-header { border-bottom: none !important; }
.yt-header-title {
    font-family: var(--font-display, "Bebas Neue", sans-serif);
    font-size: 18px;
    letter-spacing: 0.18em;
    color: var(--text-primary);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    pointer-events: none;
}

/* ── Loading shimmer ─────────────────────────────────────────────────────────── */
.yt-loading {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.yt-shim {
    border-radius: 16px;
    background: linear-gradient(
        90deg,
        var(--bg-card) 25%,
        rgba(255,255,255,0.04) 50%,
        var(--bg-card) 75%
    );
    background-size: 200% 100%;
    animation: yt-shim 1.4s infinite;
}
@keyframes yt-shim {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.yt-shim--hero { height: 100px; }
.yt-shim--card { height: 220px; }

/* ── Empty / Error ───────────────────────────────────────────────────────────── */
.yt-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 60px 24px;
}
.yt-empty-icon { font-size: 44px; }
.yt-empty-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}
.yt-empty-sub {
    font-size: 13px;
    color: var(--text-secondary);
    max-width: 260px;
}
.yt-back-link {
    font-size: 13px;
    color: var(--accent-blue);
    text-decoration: none;
    margin-top: 10px;
}

/* ── Content wrapper ─────────────────────────────────────────────────────────── */
.yt-content {
    display: flex;
    flex-direction: column;
}

/* ── Event header ────────────────────────────────────────────────────────────── */
.yt-event-header {
    padding: 14px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.yt-event-name {
    font-family: var(--font-display, "Bebas Neue", sans-serif);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.1;
    color: var(--text-primary);
    margin: 0;
}
.yt-order-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}
.yt-order-left {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.yt-order-id-label {
    font-size: 11px;
    color: var(--text-secondary);
}
.yt-order-id-val { color: var(--text-primary); }
.yt-ticket-count {
    font-size: 15px;
    font-weight: 700;
    color: var(--accent-blue);
    letter-spacing: 0.01em;
}
.yt-order-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.yt-total-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    text-transform: uppercase;
}
.yt-total-val {
    font-size: 18px;
    font-weight: 800;
    color: var(--accent-lime);
    letter-spacing: 0.01em;
}
.yt-event-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-secondary);
}
.yt-event-meta svg { flex-shrink: 0; color: var(--text-muted); }
.yt-meta-sep { color: var(--text-muted); }

/* ── Ticket cards list ───────────────────────────────────────────────────────── */
.yt-tickets-list {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ── Single ticket card ──────────────────────────────────────────────────────── */
.yt-ticket-card {
    display: flex;
    background: var(--bg-card);
    border: 1px solid rgba(79, 107, 255, 0.18);
    border-left: none; /* accent bar takes left edge */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
    position: relative;
}

/* Left accent bar — blue gradient strip matching design */
.yt-ticket-accent {
    width: 5px;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--accent-blue) 0%, var(--accent-violet) 100%);
    border-radius: 16px 0 0 16px;
}

.yt-ticket-body {
    flex: 1;
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* ── Top row: ticket# + status badge ────────────────────────────────────────── */
.yt-ticket-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.yt-ticket-num-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.yt-ticket-num-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--text-muted);
    text-transform: uppercase;
}
.yt-ticket-code {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
}

/* Status badge */
.yt-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    flex-shrink: 0;
}
.yt-status-badge--active {
    background: rgba(166, 217, 106, 0.12);
    border: 1px solid rgba(166, 217, 106, 0.25);
    color: var(--accent-lime);
}
.yt-status-badge--used {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-muted);
}

/* Status dot */
.yt-ticket-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-muted);
}
.yt-ticket-dot--active {
    background: var(--accent-lime);
    box-shadow: 0 0 6px var(--accent-lime);
    animation: yt-pulse 2s infinite;
}
.yt-ticket-dot--used { background: var(--text-muted); animation: none; }
.yt-ticket-dot--refunded { background: #ff8a65; animation: none; }
@keyframes yt-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}

/* ── Dotted divider ──────────────────────────────────────────────────────────── */
.yt-ticket-divider {
    height: 1px;
    border-top: 1px dashed rgba(255,255,255,0.08);
}

/* ── Section / row-seat row ──────────────────────────────────────────────────── */
.yt-section-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.yt-section-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.yt-section-block--right { align-items: flex-end; }
.yt-field-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--text-muted);
    text-transform: uppercase;
}
.yt-field-val {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

/* ── Attendee name ───────────────────────────────────────────────────────────── */
.yt-attendee-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 4px;
    border-top: 1px dashed rgba(255,255,255,0.06);
}
.yt-attendee-name {
    font-size: 22px;
    font-weight: 700;
    font-style: italic;
    color: var(--text-primary);
    letter-spacing: 0.01em;
    line-height: 1.2;
}

/* ── VIEW TICKET button ──────────────────────────────────────────────────────── */
.yt-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    border-radius: 100px;
    background: linear-gradient(135deg, #5b7cff 0%, #7c5fff 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-decoration: none;
    text-transform: uppercase;
    margin-top: 4px;
    transition: opacity 0.18s ease, transform 0.12s ease;
    border: none;
    cursor: pointer;
}
.yt-view-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}
.yt-view-btn:active {
    transform: translateY(0);
    opacity: 1;
}

/* ── Concert pulse strip ─────────────────────────────────────────────────────── */
.yt-pulse-strip {
    margin-top: 28px;
    position: relative;
    overflow: hidden;
    background: #08080f;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 80px; /* space for bottom nav */
}

/* Light bars at top */
.yt-pulse-lights {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    display: flex;
    gap: 2px;
    padding: 0 16px;
}
.yt-light {
    flex: 1;
    height: 100%;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(180deg, var(--accent-blue) 0%, transparent 100%);
    animation: yt-flicker 1.8s ease-in-out infinite alternate;
}
@keyframes yt-flicker {
    0%   { opacity: 0.3; }
    100% { opacity: 0.9; }
}

/* Stage SVG */
.yt-pulse-scene {
    width: 100%;
    position: absolute;
    bottom: 72px;
    left: 0;
}
.yt-stage-svg {
    width: 100%;
    height: 160px;
    display: block;
}

/* Tagline */
.yt-pulse-tagline {
    position: relative;
    z-index: 2;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.28em;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.yt-note-icon {
    color: var(--accent-lime);
    font-size: 16px;
}

/* ==== page-orders.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   ORDERS PAGE — page-orders.css
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Search bar ─────────────────────────────────────────────────────────────── */
.orders-search {
    margin: 14px 20px 0;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 100px;
    padding: 13px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.orders-search svg { color: var(--text-muted); flex-shrink: 0; }
.orders-search .search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
}
.orders-search .search-input::placeholder { color: var(--text-muted); }

/* ── Filter tabs ─────────────────────────────────────────────────────────────── */
.filter-tabs {
    display: flex;
    gap: 8px;
    padding: 14px 20px 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tab {
    flex-shrink: 0;
    padding: 8px 18px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    border: 1px solid var(--border-soft);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}
.filter-tab:hover {
    border-color: rgba(255,255,255,0.15);
    color: var(--text-primary);
}
.filter-tab--active {
    background: var(--text-primary);
    color: var(--bg-page);
    border-color: var(--text-primary);
    font-weight: 600;
}

/* ── Orders list ────────────────────────────────────────────────────────────── */
.orders-list {
    padding: 16px 20px 100px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Order card ─────────────────────────────────────────────────────────────── */
.order-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    overflow: hidden;
    transition: border-color 0.18s ease;
}
.order-card:hover { border-color: rgba(255,255,255,0.12); }

.order-card-top {
    display: flex;
    gap: 14px;
    padding: 16px 16px 14px;
    align-items: flex-start;
}

/* Thumbnail */
.order-thumb {
    width: 76px;
    height: 76px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-elevated-2, #1e1e30);
}
.order-thumb-img { width: 100%; height: 100%; object-fit: cover; }
.order-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(79,107,255,0.15) 0%, rgba(124,79,255,0.15) 100%);
    color: var(--text-muted);
}

/* Event info column */
.order-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.order-name-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.order-event-name {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
    flex: 1;
    min-width: 0;
    word-break: break-word;
}
.order-date-venue {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.3;
}
.order-date-venue svg { flex-shrink: 0; color: var(--text-muted); }

/* Status badges */
.order-status-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.07em;
    white-space: nowrap;
}
.order-status-badge--paid {
    background: rgba(75, 216, 143, 0.14);
    color: #4bd88f;
    border: 1px solid rgba(75, 216, 143, 0.28);
}
.order-status-badge--pending {
    background: rgba(180, 130, 255, 0.14);
    color: #c9a0ff;
    border: 1px solid rgba(180, 130, 255, 0.28);
}
.order-status-badge--cancelled {
    background: rgba(255, 138, 101, 0.1);
    border: 1px solid rgba(255, 138, 101, 0.22);
    color: #ff8a65;
    font-size: 10px;
    letter-spacing: 0.06em;
}

/* Divider */
.order-card-divider {
    height: 1px;
    background: var(--border-soft);
    margin: 0 16px;
}

/* Footer: total + action */
.order-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 14px;
    gap: 12px;
}
.order-total-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.order-total-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.order-total-price {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 0.5px;
    color: var(--text-primary);
}

/* Action buttons */
.order-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 20px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s ease, transform 0.12s ease;
    white-space: nowrap;
}
.order-action-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.order-action-btn--view {
    background: rgba(79, 107, 255, 0.14);
    color: #8aabff;
    border: 1px solid rgba(79, 107, 255, 0.3);
}
.order-action-btn--pay {
    background: var(--accent-lime, #a6d96a);
    color: #16151d;
}

/* ── Order card shimmer ──────────────────────────────────────────────────────── */
.shim-order-card {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    overflow: hidden;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.shim-order-card-top {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.shim-ord-thumb {
    width: 76px;
    height: 76px;
    border-radius: 14px;
    flex-shrink: 0;
}
.shim-ord-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.shim-ord-name { height: 18px; width: 70%; border-radius: 8px; }
.shim-ord-date { height: 13px; width: 55%; border-radius: 6px; }
.shim-ord-divider { height: 1px; margin: 0; border-radius: 1px; }
.shim-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.shim-ord-amount { height: 20px; width: 35%; border-radius: 8px; }
.shim-ord-btn { height: 38px; width: 30%; border-radius: 100px; }

/* ==== page-profile.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   PROFILE PAGE
   Auto-extracted from styles.css — edit this file for page-specific styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ── PROFILE ────────────────────────────────────────────────────────────────── */
.profile-glow {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 280px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(100, 200, 100, 0.07) 0%, transparent 70%);
}
.avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 20px 24px;
    position: relative;
    z-index: 1;
}
.avatar-ring {
    position: relative;
    width: 110px;
    height: 110px;
}
.avatar-circle {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 3px solid var(--accent-lime);
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow:
        0 0 0 4px rgba(166, 217, 106, 0.08),
        0 0 40px rgba(166, 217, 106, 0.12);
}
.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.avatar-edit {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-lime);
    border: 2px solid var(--bg-page);
    cursor: pointer;
    color: var(--text-on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s, transform 0.1s;
}
.avatar-edit:hover { opacity: 0.9; transform: scale(1.05); }
.profile-name {
    font-family: var(--font-display);
    font-size: 36px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    line-height: 1;
}
.profile-email {
    font-size: 13px;
    color: var(--text-secondary);
}
.stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 20px 24px;
}
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.stat-label {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.12em;
}
.stat-value {
    font-family: var(--font-display);
    font-size: 44px;
    color: var(--accent-blue);
    line-height: 1;
}
.stat-value--accent {
    color: var(--accent-lime);
}
.menu-section {
    padding: 0 20px;
}
.menu-section-label {
    display: block;
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.14em;
    margin-bottom: 12px;
}
.menu-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 16px;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
    transition: background 0.2s;
    text-align: left;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
}
.menu-item:hover {
    background: var(--bg-card-hover);
}
.menu-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.menu-item-icon--danger {
    background: rgba(255, 79, 107, 0.1);
    color: var(--danger);
}
.menu-item-label {
    flex: 1;
    font-size: 14px;
    color: var(--text-primary);
}
.menu-item--danger {
    border-color: transparent;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PROFILE PAGE — misc helpers
   ══════════════════════════════════════════════════════════════════════════════ */
.profile-tier-badge {
    display: inline-block;
    margin-top: 8px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 5px 14px;
    border-radius: 100px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   TICKETS PAGE — hero row & filter buttons
   ══════════════════════════════════════════════════════════════════════════════ */
.tickets-hero-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 20px 12px;
    gap: 16px;
    flex-wrap: wrap;
}
.tickets-title {
    font-family: var(--font-display);
    font-size: 48px;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    line-height: 0.9;
}
.tickets-sub {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.7;
    margin-top: 6px;
}
.tickets-filter-btns {
    display: flex;
    gap: 8px;
    align-self: flex-start;
    margin-top: 4px;
}
.tk-filter-btn {
    padding: 9px 18px;
    border-radius: 100px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}
.tk-filter-btn:hover {
    background: var(--bg-elevated-2);
    color: var(--text-primary);
}
.tk-filter-btn--active {
    background: var(--text-primary);
    color: var(--bg-base);
    border-color: var(--text-primary);
}
.tickets-list--mobile-only {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 20px 24px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PROFILE PAGE — POINTS CARD & EXPERIENCE SECTION
   Style mobile: kartu vertikal penuh, bukan sidebar desktop
   ══════════════════════════════════════════════════════════════════════════════ */

.profile-points-card {
    margin: 0 20px 20px;
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-violet) 100%);
    border-radius: 20px;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.profile-points-label {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.65);
}
.profile-points-value {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.profile-points-num {
    font-family: var(--font-display);
    font-size: 52px;
    color: #fff;
    letter-spacing: 0.02em;
    line-height: 1;
}
.profile-points-unit {
    font-family: var(--font-body);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
}
.profile-redeem-btn {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 100px;
    padding: 10px 20px;
    color: #fff;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.2s;
}
.profile-redeem-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Experiences section */
.profile-experiences {
    padding: 0 20px 24px;
}

.profile-exp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.profile-exp-title {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--text-muted);
}
.profile-exp-viewall {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--accent-lime);
    text-decoration: none;
    letter-spacing: 0.06em;
    transition: opacity 0.2s;
}
.profile-exp-viewall:hover {
    opacity: 0.8;
}

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

/* Kartu pengalaman — mobile: lebar penuh, gambar kiri + info kanan */
.profile-exp-card {
    display: flex;
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
}
.profile-exp-img-wrap {
    width: 90px;
    flex-shrink: 0;
}
.profile-exp-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.profile-exp-info {
    flex: 1;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.profile-exp-status {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.profile-exp-pill {
    padding: 3px 8px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.profile-exp-pill--upcoming {
    background: var(--accent-lime);
    color: var(--text-on-accent);
}
.profile-exp-when {
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}
.profile-exp-date-badge {
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}
.profile-exp-name {
    font-family: var(--font-display);
    font-size: 17px;
    letter-spacing: 0.03em;
    color: var(--text-primary);
    line-height: 1.1;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-exp-name--accent {
    color: var(--accent-blue);
}
.profile-exp-venue {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-exp-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 6px;
    flex-wrap: wrap;
}
.profile-exp-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 6px 12px;
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-primary);
    text-decoration: none;
    transition: background 0.2s;
}
.profile-exp-view-btn:hover {
    background: var(--bg-elevated-2);
}
.profile-exp-share-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}
.profile-exp-share-btn:active { opacity: 0.7; }
.profile-exp-share-btn:hover {
    background: var(--bg-elevated-2);
}
.profile-exp-price {
    margin-left: auto;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-lime);
    white-space: nowrap;
}


/* ── Story Saya (list story user + hapus) ─────────────────────────── */
.my-stories-hint {
    font-size: 13px;
    color: var(--text-muted, rgba(255,255,255,0.6));
    padding: 8px 2px 4px;
    line-height: 1.5;
}
.my-stories-grid {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
    /* sembunyikan scrollbar (tetap bisa di-geser) */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.my-stories-grid::-webkit-scrollbar { display: none; }
.my-story-cell {
    position: relative;
    flex: 0 0 auto;
    width: 92px;
    aspect-ratio: 9 / 16;
    scroll-snap-align: start;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
}
.my-story-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.my-story-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 2px 7px;
    border-radius: 99px;
    color: #fff;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
}
.my-story-badge--active {
    background: var(--accent-lime, #b6ff3a);
    color: #10240a;
}
.my-story-del {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    color: #fff;
    background: rgba(220, 38, 38, 0.85);
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}
.my-story-del:hover {
    background: rgba(220, 38, 38, 1);
    transform: scale(1.08);
}
.my-story-del:active { transform: scale(0.94); }
/* ==== page-pulse-apply.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   PAGE — PARTNER WITH PULSE (/pulse-apply)
   Prefix: .pa-   |  Dark default + [data-theme="light"] overrides
   ═══════════════════════════════════════════════════════════════════════ */

.pa-page {
    position: relative;
    max-width: 480px;
    margin: 0 auto;
    min-height: 100dvh;
    background: var(--bg-page);
    color: var(--text-primary);
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 12px));
    overflow-x: hidden;
}

/* Glow halus di belakang hero (dark only) */
.pa-page::before {
    content: "";
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(79, 107, 255, 0.16) 0%, transparent 68%);
    pointer-events: none;
    z-index: 0;
}

/* ── TOP BAR ─────────────────────────────────────────────────────────────── */
.pa-topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-header, 40);
    display: flex;
    align-items: center;
    gap: 14px;
    height: 56px;
    padding: 0 18px;
    background: var(--overlay-blur);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
}
.pa-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    text-decoration: none;
    width: 28px;
    height: 28px;
}
.pa-topbar-title {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 2.5px;
    color: var(--accent-info);
}
.pa-topbar-spacer {
    flex: 1;
}

/* ── MAIN ────────────────────────────────────────────────────────────────── */
.pa-main {
    position: relative;
    z-index: 1;
    padding: 30px 22px 0;
    animation: fadeUp 0.45s ease both;
}

/* ── HERO ────────────────────────────────────────────────────────────────── */
.pa-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid color-mix(in srgb, var(--accent-lime) 55%, transparent);
    border-radius: 999px;
    color: var(--accent-lime);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.pa-title {
    margin: 18px 0 0;
    font-family: var(--font-display);
    font-size: 62px;
    line-height: 0.9;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-primary);
}
.pa-title-accent {
    color: var(--text-soft-accent);
}

.pa-sub {
    margin: 18px 0 0;
    max-width: 360px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}
.pa-hl {
    color: var(--accent-lime);
    font-weight: 700;
}

/* ── STATS ───────────────────────────────────────────────────────────────── */
.pa-stats {
    display: flex;
    gap: 52px;
    margin-top: 28px;
}
.pa-stat {
    display: flex;
    flex-direction: column;
}
.pa-stat-num {
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 1;
    color: var(--text-primary);
}
.pa-stat-num--lime {
    color: var(--accent-lime);
}
.pa-stat-label {
    margin-top: 6px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* ── FORM CARD ───────────────────────────────────────────────────────────── */
.pa-form-card {
    margin-top: 30px;
    padding: 26px 22px;
    border-radius: 26px;
    border: 1px solid var(--border-soft);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.045) 0%,
        rgba(255, 255, 255, 0.012) 100%
    );
}

.pa-field + .pa-field {
    margin-top: 20px;
}
.pa-label {
    display: block;
    margin-bottom: 9px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Input pill */
.pa-input {
    width: 100%;
    height: 56px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 14px;
    -webkit-appearance: none;
    appearance: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}
.pa-input::placeholder {
    color: var(--text-muted);
}
.pa-input:focus,
.pa-input--prefixed:focus-within {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue) 22%, transparent);
}

/* Input dengan prefix "Rp" */
.pa-input--prefixed {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pa-prefix {
    flex-shrink: 0;
    color: var(--text-primary);
    font-weight: 700;
    font-size: 14px;
}
.pa-input-bare {
    flex: 1;
    min-width: 0;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 14px;
}
.pa-input-bare::placeholder {
    color: var(--text-muted);
}

/* ── AGREEMENT ───────────────────────────────────────────────────────────── */
.pa-agree {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    margin-top: 22px;
    padding: 0;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}
.pa-check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    border: 1.8px solid var(--border-strong);
    display: grid;
    place-items: center;
    color: transparent;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}
.pa-agree--on .pa-check {
    background: var(--accent-lime);
    border-color: var(--accent-lime);
    color: var(--text-on-accent);
}
.pa-agree-text {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-secondary);
}
.pa-agree-link {
    color: var(--text-primary);
    font-weight: 600;
}

/* ── SUBMIT ──────────────────────────────────────────────────────────────── */
.pa-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 60px;
    margin-top: 22px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    color: #0a1030;
    background: linear-gradient(100deg, #b9c4ff 0%, #5b78ff 55%, #3a5bff 100%);
    box-shadow: 0 12px 32px rgba(79, 107, 255, 0.35);
    transition:
        transform 0.15s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}
.pa-submit:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 38px rgba(79, 107, 255, 0.45);
}
.pa-submit:not(:disabled):active {
    transform: translateY(0);
}
.pa-submit:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   LIGHT MODE
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .pa-page::before {
    display: none;
}
[data-theme="light"] .pa-form-card {
    background: var(--bg-card);
    border-color: var(--border);
    box-shadow: var(--shadow-card);
}
[data-theme="light"] .pa-input {
    background: #eef0f8;
    border-color: var(--border);
}
[data-theme="light"] .pa-submit {
    color: #ffffff;
    background: linear-gradient(100deg, #5b78ff 0%, #3a5bff 60%, #2d4ee0 100%);
    box-shadow: 0 10px 26px rgba(45, 78, 224, 0.28);
}
[data-theme="light"] .pa-check {
    border-color: var(--border-strong);
}

/* ==== page-scan.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   SCAN PAGE
   Auto-extracted from styles.css — edit this file for page-specific styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   SCAN PAGE  /merchant/scan
   ══════════════════════════════════════════════════════════════════════════════ */

/* Scan button di merchant header */
.mhub-scan-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 100px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: opacity 0.2s;
}
.mhub-scan-btn:hover {
    opacity: 0.88;
}

/* Page layout */
.scan-page {
    background: var(--bg-page);
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    min-height: 100dvh;
    position: relative;
}

.scan-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--overlay-blur);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
}
.scan-header-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.scan-header-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.04em;
}
.scan-header-sub {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}

/* Body */
.scan-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 16px 40px;
}

/* Viewfinder */
.scan-viewfinder-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.scan-viewfinder {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    max-height: 320px;
    border-radius: 20px;
    overflow: hidden;
    background: #0a0a0a;
    border: 1.5px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}
.scan-viewfinder--active {
    border-color: var(--accent-lime);
}

.scan-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
    opacity: 0;
    pointer-events: none;
}
.scan-video--active {
    opacity: 1;
}

/* Corner frame overlay */
.scan-frame {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.scan-frame-corner {
    position: absolute;
    width: 28px;
    height: 28px;
    border-color: var(--accent-lime);
    border-style: solid;
    border-width: 0;
}
.scan-frame-corner--tl {
    top: 16px;
    left: 16px;
    border-top-width: 3px;
    border-left-width: 3px;
    border-radius: 4px 0 0 0;
}
.scan-frame-corner--tr {
    top: 16px;
    right: 16px;
    border-top-width: 3px;
    border-right-width: 3px;
    border-radius: 0 4px 0 0;
}
.scan-frame-corner--bl {
    bottom: 16px;
    left: 16px;
    border-bottom-width: 3px;
    border-left-width: 3px;
    border-radius: 0 0 0 4px;
}
.scan-frame-corner--br {
    bottom: 16px;
    right: 16px;
    border-bottom-width: 3px;
    border-right-width: 3px;
    border-radius: 0 0 4px 0;
}

/* Scanning line animation */
.scan-line {
    position: absolute;
    left: 16px;
    right: 16px;
    height: 2px;
    background: var(--accent-lime);
    box-shadow: 0 0 8px var(--accent-lime);
    animation: scan-sweep 2s ease-in-out infinite;
}
@keyframes scan-sweep {
    0% {
        top: 16px;
    }
    50% {
        top: calc(100% - 16px);
    }
    100% {
        top: 16px;
    }
}

/* Placeholder */
.scan-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 24px;
}
.scan-placeholder-text {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.5;
}

/* Processing overlay */
.scan-processing {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #fff;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
}
.scan-spinner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--accent-lime);
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Controls */
.scan-controls {
    display: flex;
    justify-content: center;
}
.scan-start-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 32px;
    border-radius: 100px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    transition: opacity 0.2s;
}
.scan-start-btn:hover {
    opacity: 0.88;
}
.scan-stop-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 100px;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: 1.5px solid var(--border);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    transition: background 0.2s;
}

/* Result card */
.scan-result {
    border-radius: 18px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}
.scan-result--valid {
    background: rgba(100, 255, 100, 0.1);
    border: 1.5px solid rgba(100, 255, 100, 0.3);
}
.scan-result--used {
    background: rgba(255, 200, 50, 0.1);
    border: 1.5px solid rgba(255, 200, 50, 0.3);
}
.scan-result--invalid {
    background: rgba(255, 80, 80, 0.1);
    border: 1.5px solid rgba(255, 80, 80, 0.3);
}

.scan-result-icon {
    font-size: 40px;
}
.scan-result-title {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
}
.scan-result-detail {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    white-space: pre-line;
}
.scan-again-btn {
    margin-top: 4px;
    padding: 10px 28px;
    border-radius: 100px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-primary);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    transition: background 0.2s;
}
.scan-again-btn:hover {
    background: var(--bg-card-hover);
}

/* Manual input */
.scan-manual-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.scan-manual-label {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    text-align: center;
}
.scan-manual-row {
    display: flex;
    gap: 8px;
}
.scan-manual-input {
    flex: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 11px 14px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}
.scan-manual-input:focus {
    border-color: var(--accent-lime);
}
.scan-manual-input::placeholder {
    color: var(--text-muted);
}
.scan-manual-btn {
    padding: 11px 18px;
    border-radius: 12px;
    background: var(--accent-blue);
    color: #fff;
    border: none;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.2s;
}
.scan-manual-btn:hover {
    opacity: 0.88;
}
.scan-manual-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ==== page-story.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   STORY SYSTEM — Complete CSS
   Story Bar · Story Viewer · Story Creator · Draggable Overlay
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   STORY BAR
   ───────────────────────────────────────────────────────────────────────── */
.story-bar {
    display: flex;
    gap: 4px;
    padding: 14px 16px 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.story-bar::-webkit-scrollbar { display: none; }

.story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.story-add-btn,
.story-user-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

/* ── Avatar ring base ── */
.story-avatar-ring {
    position: relative;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    padding: 2.5px;
    background: conic-gradient(var(--accent-lime) 0%, var(--accent-blue) 50%, var(--accent-violet) 100%);
    transition: transform 0.16s ease, opacity 0.16s ease;
}
.story-add-btn:active .story-avatar-ring,
.story-user-btn:active .story-avatar-ring {
    transform: scale(0.92);
    opacity: 0.8;
}

.story-avatar-ring--add {
    background: linear-gradient(135deg, var(--accent-lime) 0%, var(--accent-blue) 100%);
}

.story-avatar-ring--viewed {
    background: var(--bg-elevated-2);
}

/* ════════════════════════════════════════════════════════════════════════
   UPLOADING RING — Arc spinner + glow (Dark mode default)
   ════════════════════════════════════════════════════════════════════════ */
.story-avatar-ring--uploading {
    background: rgba(255, 255, 255, 0.08);
    animation: none !important;
}

.story-avatar-ring--uploading::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--accent-lime, #a6d96a);
    border-right-color: rgba(166, 217, 106, 0.38);
    animation: story-arc-spin 0.88s cubic-bezier(0.65, 0, 0.35, 1) infinite;
    pointer-events: none;
    z-index: 1;
}

.story-avatar-ring--uploading::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: story-glow-pulse 1.5s ease-in-out infinite;
}

@keyframes story-arc-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes story-glow-pulse {
    0%, 100% { box-shadow: 0 0 0 0   rgba(166, 217, 106, 0); }
    50%       { box-shadow: 0 0 0 5px rgba(166, 217, 106, 0.18); }
}

/* Inner content — must NOT spin */
.story-avatar-ring--uploading > .story-avatar-inner {
    animation: none !important;
    transform: none !important;
}

.story-upload-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-lime, #a6d96a);
    animation: story-upload-icon-breathe 1.4s ease-in-out infinite;
}

@keyframes story-upload-icon-breathe {
    0%, 100% { opacity: 1;    transform: scale(1);    }
    50%       { opacity: 0.60; transform: scale(0.86); }
}

/* Plus badge on "Cerita Anda" */
.story-avatar-ring--add .story-avatar-inner::after {
    content: "+";
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 20px;
    height: 20px;
    background: var(--accent-blue, #0984e3);
    border-radius: 50%;
    border: 2px solid var(--bg-base, #000);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    pointer-events: none;
}

.story-avatar-ring--uploading.story-avatar-ring--add .story-avatar-inner::after {
    display: none;
}

.story-avatar-inner { position: relative; }

.story-avatar-inner,
.story-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;
    border: 2.5px solid var(--bg-base);
    background: var(--bg-elevated);
    object-fit: cover;
}

.story-avatar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-accent);
    background: linear-gradient(135deg, var(--accent-lime) 0%, var(--accent-blue) 100%);
}

.story-username {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-secondary);
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.story-username--add { transition: color 0.3s ease; }

.story-shim-ring {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    margin: 4px 6px;
}

.story-shim-name {
    width: 44px;
    height: 8px;
    border-radius: 4px;
    margin-top: 6px;
}

/* ─────────────────────────────────────────────────────────────────────────
   STORY VIEWER (sv-*)
   ───────────────────────────────────────────────────────────────────────── */
.sv-portal { display: contents; }

.sv-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: var(--z-story, 900);
}

/* ── Scene: kolom story fixed + perspective utk cube swipe antar-user ──
   Drag horizontal merotasi .sv-cube; face tetangga (preview user sebelah)
   muncul di sisi kubus — persis transisi story Instagram. */
.sv-scene {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    height: 100dvh;
    z-index: var(--z-story-ui, 901);
    perspective: 1400px;
    overflow: hidden;
    background: transparent;
    animation: sv-in 0.22s ease;
    will-change: transform;
}

.sv-cube {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    will-change: transform;
}

/* Saat drag aktif (.is-3d), face aktif maju setengah lebar kubus.
   --sv-w di-set dari offsetWidth aktual pada touchstart. */
.sv-cube.is-3d .sv-container {
    transform: rotateY(0deg) translateZ(calc(var(--sv-w, 480px) / 2));
    backface-visibility: hidden;
}

.sv-face-neighbor {
    position: absolute;
    inset: 0;
    background: #000;
    overflow: hidden;
    backface-visibility: hidden;
}
.sv-face-prev { transform: rotateY(-90deg) translateZ(calc(var(--sv-w, 480px) / 2)); }
.sv-face-next { transform: rotateY(90deg) translateZ(calc(var(--sv-w, 480px) / 2)); }

/* Dim tipis di face tetangga — depth cue ala Instagram */
.sv-face-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.38);
}

.sv-face-id {
    position: absolute;
    top: max(40px, env(safe-area-inset-top, 0px) + 34px);
    left: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
}
.sv-face-avatar { width: 42px; height: 42px; }
.sv-face-username {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.sv-container {
    position: absolute;
    inset: 0;
    background: #000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    touch-action: none;
}

@keyframes sv-in {
    from { opacity: 0; transform: translateX(-50%) scale(0.97); }
    to   { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* ── EXIT ANIMATION ── */
.sv-container.is-exiting {
    animation: sv-out 0.32s cubic-bezier(0.32, 0.94, 0.6, 1.0) forwards;
    pointer-events: none;
}

@keyframes sv-out {
    0%   { opacity: 1; transform: translateX(-50%) scale(1);    filter: blur(0px); }
    60%  { opacity: 0.85; transform: translateX(-50%) scale(0.96); }
    100% { opacity: 0; transform: translateX(-50%) scale(0.92); filter: blur(2px); }
}

.sv-progress-row {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    gap: 4px;
    padding: max(12px, env(safe-area-inset-top, 0px) + 8px) 10px 8px;
}

.sv-seg {
    flex: 1;
    height: 2.5px;
    border-radius: 2px;
    background: rgba(255,255,255,0.3);
    overflow: hidden;
}

.sv-seg-fill {
    height: 100%;
    background: var(--accent-lime);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
}

.sv-header {
    position: absolute;
    top: 28px;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    padding: 10px 14px;
    gap: 10px;
}

.sv-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.sv-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Menu ⋮ pemilik story (opsi hapus) ─────────────────────────────── */
.sv-owner {
    position: relative;
    display: flex;
    align-items: center;
}
.sv-owner-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease;
}
.sv-owner-btn:hover { background: rgba(255, 255, 255, 0.14); }
.sv-owner-menu {
    position: absolute;
    top: 40px;
    right: 0;
    z-index: 30;
    min-width: 168px;
    padding: 6px;
    border-radius: 14px;
    background: rgba(28, 28, 30, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    animation: sv-owner-pop 0.14s ease;
}
@keyframes sv-owner-pop {
    from { opacity: 0; transform: translateY(-6px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.sv-owner-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: #fff;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease;
}
.sv-owner-item:hover { background: rgba(255, 255, 255, 0.08); }
.sv-owner-item--danger { color: #ff453a; }
.sv-owner-item--danger:hover { background: rgba(255, 69, 58, 0.14); }

.sv-avatar-ring {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    padding: 2px;
    flex-shrink: 0;
    background: conic-gradient(var(--accent-lime) 0%, var(--accent-blue) 50%, var(--accent-violet) 100%);
}

.sv-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #000;
    display: block;
}

.sv-user-info { min-width: 0; overflow: hidden; }

.sv-username {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.sv-meta {
    font-size: 11px;
    color: rgba(255,255,255,0.75);
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sv-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}
.sv-close-btn:hover { background: rgba(0,0,0,0.65); }

.sv-media-area {
    flex: 1;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.sv-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* ── Image loading UX ── */
.sv-img-shell {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

@keyframes sv-shimmer-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.sv-shimmer {
    position: absolute;
    inset: 0;
    background: #111118;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    overflow: hidden;
}

.sv-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.06) 40%,
        rgba(255,255,255,0.12) 50%,
        rgba(255,255,255,0.06) 60%,
        transparent 100%
    );
    animation: sv-shimmer-slide 1.4s ease-in-out infinite;
}

.sv-img-loading .sv-shimmer { opacity: 1; }

.sv-img-hidden { opacity: 0; }

@keyframes sv-img-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.sv-img-visible {
    opacity: 1;
    animation: sv-img-fadein 0.25s ease-out forwards;
}

.sv-overlay-text {
    position: absolute;
    transform-origin: center;
    font-weight: 700;
    text-shadow: 0 1px 6px rgba(0,0,0,0.6);
    pointer-events: none;
    user-select: none;
    white-space: pre-wrap;
}

.sv-overlay-sticker {
    position: absolute;
    transform-origin: center;
    font-size: 36px;
    pointer-events: none;
    user-select: none;
}

.sv-pulse-badge {
    position: absolute;
    bottom: 90px;
    left: 14px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(0,0,0,0.55);
    border-radius: 20px;
    color: var(--accent-lime);
    font-size: 13px;
    font-weight: 700;
    backdrop-filter: blur(6px);
    pointer-events: none;
}

.sv-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px 28px;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
}

.sv-actions--readonly {
    padding: 10px 16px 28px;
    justify-content: space-between;
}

.sv-pulse-input {
    flex: 1;
    padding: 12px 16px;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 14px;
    outline: none;
    backdrop-filter: blur(8px);
}
.sv-pulse-input::placeholder { color: rgba(255,255,255,0.55); }
.sv-pulse-input:focus { border-color: rgba(255,255,255,0.5); }

.sv-action-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    backdrop-filter: blur(6px);
    transition: background 0.15s;
}
.sv-action-btn:hover { background: rgba(255,255,255,0.25); }

.sv-viewer-info {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    background: rgba(0,0,0,0.45);
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    color: rgba(255,255,255,0.75);
    flex: 1;
    min-width: 0;
}

.sv-viewer-count {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sv-like-btn {
    transition: background 0.2s cubic-bezier(0.22,1,0.36,1),
                transform 0.2s cubic-bezier(0.22,1,0.36,1),
                color 0.2s ease !important;
}
.sv-like-btn:active { transform: scale(0.82) !important; }

.sv-like-btn--active {
    background: rgba(255,59,92,0.35) !important;
    color: #ff3b5c !important;
    border: 1px solid rgba(255,59,92,0.4) !important;
    animation: sv-like-pop 0.4s cubic-bezier(0.22,1,0.36,1);
}

@keyframes sv-like-pop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.35); }
    60%  { transform: scale(0.92); }
    100% { transform: scale(1); }
}

.sv-tap-zone {
    position: absolute;
    top: 60px;
    bottom: 90px;
    width: 28%;
    z-index: 8;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.sv-tap-zone--left  { left: 0;  justify-content: flex-start; padding-left: 10px; }
.sv-tap-zone--right { right: 0; justify-content: flex-end;   padding-right: 10px; }

.sv-tap-hint {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0);
    transition: background 0.2s ease, color 0.2s ease;
}

.sv-tap-zone:hover .sv-tap-hint {
    background: rgba(0,0,0,0.28);
    color: rgba(255,255,255,0.7);
}

/* ── Instagram-style Event Detail Bottom Sheet ── */
.sv-detail-overlay {
    position: absolute;
    inset: 0;
    z-index: 28;
    background: rgba(0,0,0,0.42);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    animation: sv-detail-overlay-in 0.22s ease both;
    cursor: pointer;
}

@keyframes sv-detail-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.sv-detail-sheet {
    background: rgba(10,10,20,0.97);
    backdrop-filter: blur(32px) saturate(1.5);
    -webkit-backdrop-filter: blur(32px) saturate(1.5);
    border-radius: 20px 20px 0 0;
    border-top: 1px solid rgba(255,255,255,0.10);
    overflow: hidden;
    cursor: default;
    animation: sv-detail-sheet-up 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes sv-detail-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.sv-detail-handle-bar {
    width: 40px;
    height: 4px;
    background: rgba(255,255,255,0.26);
    border-radius: 3px;
    margin: 12px auto 0;
    flex-shrink: 0;
}

.sv-detail-cover-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    margin-top: 16px;
    flex-shrink: 0;
}

.sv-detail-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sv-detail-cover-grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 30%, rgba(10,10,20,0.88) 100%);
    pointer-events: none;
}

.sv-detail-body {
    padding: 14px 20px 32px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sv-detail-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-lime, #a6d96a);
}

.sv-detail-title {
    margin: 0;
    font-family: var(--font-display), "Syne", sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -0.02em;
    word-break: break-word;
}

.sv-detail-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 14px 24px;
    background: #fff;
    color: #000;
    border: none;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    align-self: flex-start;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s, transform 0.18s cubic-bezier(0.22,1,0.36,1);
}

.sv-detail-cta:hover  { opacity: 0.88; }
.sv-detail-cta:active { opacity: 0.72; transform: scale(0.96); }

/* ─────────────────────────────────────────────────────────────────────────
   STORY CREATOR (sc-*)
   ───────────────────────────────────────────────────────────────────────── */
.sc-halaman,
.sc-page {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    height: 100dvh;
    background: #000;
    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.9);
}

/* ── Exit / Dismiss Animation ── */
.sc-halaman.is-exiting { pointer-events: none; }

.sc-halaman.is-exiting .sc-canvas-frame {
    animation: sc-exit-canvas 0.48s cubic-bezier(0.32, 0.94, 0.6, 1.0) forwards;
}

.sc-halaman.is-exiting .sc-appbar,
.sc-halaman.is-exiting .sc-toolbar-atas,
.sc-halaman.is-exiting .sc-toolbar-samping,
.sc-halaman.is-exiting .sc-area-bawah {
    animation: sc-exit-fade 0.22s ease forwards;
}

.sc-halaman.is-exiting .sc-panel-geser {
    animation: sc-exit-panel 0.28s cubic-bezier(0.55, 0, 1, 1) forwards;
}

.sc-halaman.is-exiting .sc-area-pratinjau {
    animation: sc-exit-backdrop 0.50s ease forwards;
}

.sc-halaman.is-exiting .sc-notif-gagal {
    animation: sc-exit-fade 0.15s ease forwards;
}

@keyframes sc-exit-canvas {
    0%   { transform: scale(1) translateY(0);      opacity: 1;    filter: blur(0px); }
    60%  {                                          opacity: 0.85; }
    100% { transform: scale(0.88) translateY(12vh); opacity: 0; filter: blur(2px); }
}

@keyframes sc-exit-fade {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-8px); }
}

@keyframes sc-exit-panel {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(40px); }
}

@keyframes sc-exit-backdrop {
    from { opacity: 1; filter: blur(0px) brightness(1); }
    to   { opacity: 0.3; filter: blur(8px) brightness(0.4); }
}

.sc-appbar,
.sc-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: max(14px, env(safe-area-inset-top, 0px) + 10px) 16px 14px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
}

.sc-tombol-bulat,
.sc-topbar-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0,0,0,0.4);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background 0.18s cubic-bezier(0.22,1,0.36,1),
                transform 0.18s cubic-bezier(0.22,1,0.36,1);
}
.sc-tombol-bulat:hover { background: rgba(0,0,0,0.65); }
.sc-tombol-bulat:active { transform: scale(0.9); }

.sc-badge-langsung,
.sc-live-badge {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 20px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: default;
    backdrop-filter: blur(12px);
}

.sc-dot-merah,
.sc-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff3b30;
    box-shadow: 0 0 6px rgba(255,59,48,0.8);
    animation: sc-pulse 2s ease infinite;
}

@keyframes sc-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

.sc-input-file,
.sc-file-input { display: none; }

.sc-area-pratinjau,
.sc-viewfinder {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #000;
    transition: background-color 0.3s ease, background 0.3s ease;
    cursor: pointer;
    container-type: size;
}

/* ── Hero transition ── */
@keyframes sc-hero-fly-in {
    from { transform: scale(1.6) translateY(-15%); opacity: 0.5; filter: blur(4px); }
    to   { transform: scale(1) translateY(0);       opacity: 1;   filter: blur(0); }
}

.sc-hero-transition .sc-event-bg-img,
.sc-hero-transition img.sc-media {
    animation: sc-hero-fly-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.sc-canvas-frame {
    position: relative;
    aspect-ratio: 9 / 16;
    width: min(calc(88dvh * 9 / 16), 92%);
    height: auto;
    max-height: 88dvh;
    max-width: 92%;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 20px 60px rgba(0,0,0,0.85),
        0 8px 24px rgba(0,0,0,0.5);
    isolation: isolate;
    container-type: size;
    container-name: story-canvas;
}

.sc-canvas-bg {
    position: absolute;
    inset: -40px;
    background-size: cover;
    background-position: center;
    filter: blur(45px) brightness(0.80) saturate(1.2);
    transform: scale(1.15);
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.sc-canvas-bg--solid {
    filter: none;
    transform: none;
    inset: 0;
    border-radius: 0;
    transition: background 0.25s ease, background-color 0.25s ease;
}

.sc-panduan-fokus,
.sc-focus-bracket {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
}

.sc-sudut,
.sc-focus-corner {
    position: absolute;
    width: 28px;
    height: 28px;
    border-color: rgba(255,255,255,0.6);
    border-style: solid;
}

.sc-sudut--kiri-atas   { top: 0;    left: 0;  border-width: 2px 0 0 2px; }
.sc-sudut--kanan-atas  { top: 0;    right: 0; border-width: 2px 2px 0 0; }
.sc-sudut--kiri-bawah  { bottom: 0; left: 0;  border-width: 0 0 2px 2px; }
.sc-sudut--kanan-bawah { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

.sc-teks-panduan {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    text-align: center;
    pointer-events: none;
    white-space: nowrap;
}

.sc-teks-panduan p { margin: 0; }

.sc-ikon-kamera {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.65);
    margin-bottom: 8px;
}

.sc-judul-panduan {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    margin: 0;
    font-family: var(--font-body);
}

.sc-sub-panduan {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    margin: 0;
    font-family: var(--font-body);
    letter-spacing: 0.06em;
}

.sc-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Layer foto user: baseline "contain" (foto utuh) + letterbox hitam.
   Zoom diatur via transform:scale() dari bg_scale (1.0 = fit, cover_factor = fill).
   Harus SETELAH .sc-media supaya object-fit:contain menang (specificity sama). */
.sc-media--fit {
    object-fit: contain;
    background: #000;
}

.sc-layer-media { position: absolute; inset: 0; z-index: 1; }

.sc-layer-overlays {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
    pointer-events: none;
    container-type: size;
    container-name: overlay-stage;
}

.sc-layer-overlays > * { pointer-events: auto; }

/* ── Background picker ── */
.sc-bg-picker {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 25;
    display: flex;
    gap: 9px;
    padding: 10px 14px;
    background: rgba(0,0,0,0.60);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 100px;
    animation: sc-fade-slide 0.3s cubic-bezier(0.22,1,0.36,1) both;
    max-width: calc(100vw - 32px);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    pointer-events: auto;
}

.sc-bg-picker::-webkit-scrollbar { display: none; }

@keyframes sc-fade-slide {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.sc-bg-chip {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.22,1,0.36,1), border-color 0.15s;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15), 0 2px 6px rgba(0,0,0,0.4);
}

.sc-bg-chip:hover { transform: scale(1.18); }

.sc-bg-chip--aktif {
    border-color: #fff;
    transform: scale(1.22);
    box-shadow: 0 0 0 2px var(--accent-lime, #a6d96a), inset 0 0 0 1px rgba(255,255,255,0.2);
}

.sc-notif-gagal,
.sc-error-banner {
    position: absolute;
    top: 70px;
    left: 16px;
    right: 16px;
    z-index: 30;
    padding: 10px 14px;
    background: rgba(255,48,64,0.9);
    border-radius: 10px;
    color: #fff;
    font-size: 13px;
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sc-tombol-coba-lagi {
    flex-shrink: 0;
    padding: 5px 12px;
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.sc-tombol-coba-lagi:hover { background: rgba(255,255,255,0.22); }

/* ── Toolbar samping ── */
.sc-toolbar-samping,
.sc-left-toolbar {
    position: absolute;
    bottom: 116px;
    left: 50%;
    right: auto;
    top: auto;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    flex-direction: row;
    gap: 2px;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 100px;
    padding: 6px 10px;
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    animation: sc-toolbar-slide-up 0.3s cubic-bezier(0.22,1,0.36,1) both;
}

@keyframes sc-toolbar-slide-up {
    from { opacity: 0; transform: translateX(-50%) translateY(12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.sc-tombol-alat,
.sc-side-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    transition: background 0.18s cubic-bezier(0.22,1,0.36,1),
                transform 0.18s cubic-bezier(0.22,1,0.36,1),
                color 0.15s ease;
}

.sc-tombol-alat:hover { background: rgba(255,255,255,0.12); transform: scale(1.1); }
.sc-tombol-alat:active { transform: scale(0.88); }

.sc-tombol-alat--aktif,
.sc-side-btn--active {
    background: rgba(166, 217, 106,0.18);
    color: var(--accent-lime);
}

.sc-ikon-musik-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-tombol-alat-label {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: inherit;
    text-transform: uppercase;
    line-height: 1;
    pointer-events: none;
}

.sc-dot-musik {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-lime);
    border: 2px solid #000;
    box-shadow: 0 0 6px rgba(166, 217, 106,0.8);
}

/* Top tiny toolbar */
.sc-toolbar-atas {
    position: absolute;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 22;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    backdrop-filter: blur(12px);
}

.sc-tombol-alat-kecil {
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s;
    font-family: var(--font-body);
}

.sc-tombol-alat-kecil:hover { background: rgba(255,255,255,0.12); }

.sc-label-pill {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0 6px;
    white-space: nowrap;
}

/* Music badge */
.sc-badge-musik {
    position: absolute;
    bottom: 174px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 20px;
    backdrop-filter: blur(12px);
    max-width: 75%;
    animation: sc-musik-masuk 0.3s ease both;
}

@keyframes sc-musik-masuk {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.sc-teks-badge-musik {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.sc-hapus-musik {
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    color: #fff;
    transition: background 0.15s;
}

.sc-hapus-musik:hover { background: rgba(255,255,255,0.3); }

/* ── Panel geser ── */
.sc-panel-geser,
.sc-panel {
    position: absolute;
    bottom: 80px;
    left: 0;
    right: 0;
    z-index: 25;
    background: rgba(10,10,18,0.85);
    backdrop-filter: blur(28px) saturate(1.6);
    -webkit-backdrop-filter: blur(28px) saturate(1.6);
    border-top: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px 20px 0 0;
    padding: 28px 16px 20px;
    max-height: 68dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: sc-spring-up 0.38s cubic-bezier(0.22,1,0.36,1) both;
}

@keyframes sc-spring-up {
    0%   { opacity: 0; transform: translateY(60px); }
    60%  { opacity: 1; transform: translateY(-4px); }
    80%  { transform: translateY(1px); }
    100% { opacity: 1; transform: translateY(0); }
}

.sc-panel-header {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    margin-bottom: 16px;
    position: relative;
    min-height: 32px;
}

.sc-garis-pemisah {
    grid-column: 1;
    width: 0;
    height: 0;
    overflow: hidden;
}

.sc-panel-geser::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 4px;
    background: rgba(255,255,255,0.22);
    border-radius: 3px;
    pointer-events: none;
}

.sc-judul-panel {
    grid-column: 2;
    text-align: center;
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 0.06em;
    color: #fff;
    line-height: 1;
}

.sc-tombol-tutup-panel {
    grid-column: 3;
    justify-self: end;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: none;
    color: rgba(255,255,255,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s cubic-bezier(0.22,1,0.36,1),
                transform 0.18s cubic-bezier(0.22,1,0.36,1);
}

.sc-tombol-tutup-panel:hover { background: rgba(255,255,255,0.2); transform: scale(1.12); }
.sc-tombol-tutup-panel:active { transform: scale(0.88); }

/* ── Panel: Text ── */
.sc-text-preview-box {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    border-radius: 12px;
    margin-bottom: 14px;
    word-break: break-word;
    line-height: 1.3;
    transition: all 0.15s ease;
}

.sc-text-edit-row { display: flex; gap: 14px; margin-bottom: 14px; }

.sc-size-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 36px;
}

.sc-slider-vertical {
    writing-mode: vertical-lr;
    direction: rtl;
    height: 100px;
    width: 4px;
    accent-color: #fff;
    cursor: pointer;
}

.sc-size-label {
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    font-weight: 700;
    font-family: var(--font-body);
}

.sc-text-controls {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sc-font-carousel {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.sc-font-carousel::-webkit-scrollbar { display: none; }

.sc-font-chip {
    white-space: nowrap;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.25);
    background: transparent;
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.sc-font-chip--aktif { background: #fff; color: #000; border-color: #fff; }

.sc-align-row { display: flex; gap: 8px; }

.sc-align-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.2);
    background: transparent;
    color: rgba(255,255,255,0.75);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.sc-align-btn--aktif { background: rgba(255,255,255,0.2); color: #fff; }

.sc-bg-toggle {
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.25);
    background: transparent;
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    align-self: flex-start;
    transition: all 0.15s;
}

.sc-bg-toggle--on { background: #fff; color: #000; border-color: #fff; }

.sc-baris-warna {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 4px 0;
    margin-bottom: 14px;
}

.sc-tombol-warna {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 0.22s cubic-bezier(0.22,1,0.36,1),
                border-color 0.18s,
                box-shadow 0.18s;
}

.sc-tombol-warna:hover { transform: scale(1.15); }
.sc-tombol-warna:active { transform: scale(0.85); }

.sc-tombol-warna--aktif {
    border-color: #fff;
    box-shadow: 0 0 0 2.5px var(--accent-lime);
    transform: scale(1.2);
}

.sc-area-input-teks { display: flex; align-items: center; gap: 10px; }

.sc-input-teks-besar {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid rgba(255,255,255,0.3);
    color: #fff;
    font-size: 18px;
    font-family: var(--font-body);
    padding: 10px 0;
    text-align: center;
    outline: none;
    transition: border-color 0.22s cubic-bezier(0.22,1,0.36,1);
}

.sc-input-teks-besar::placeholder { color: rgba(255,255,255,0.4); }
.sc-input-teks-besar:focus { border-bottom-color: var(--accent-lime); }

.sc-tombol-done {
    flex-shrink: 0;
    padding: 10px 18px;
    border-radius: 20px;
    border: none;
    background: var(--accent-lime);
    color: #000;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: opacity 0.15s;
}

.sc-tombol-done:hover { opacity: 0.85; }

/* ── Panel: Sticker ── */
.sc-grid-stiker {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.sc-grid-stiker::-webkit-scrollbar { display: none; }

.sc-tombol-stiker {
    aspect-ratio: 1;
    background: rgba(255,255,255,0.07);
    border: none;
    border-radius: 12px;
    font-size: 26px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.22s cubic-bezier(0.22,1,0.36,1), background 0.15s;
}

.sc-tombol-stiker:hover { transform: scale(1.2); background: rgba(255,255,255,0.14); }
.sc-tombol-stiker:active { transform: scale(0.88); }

/* ── Panel: Music ── */
.sc-list-musik {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: none;
}

.sc-list-musik::-webkit-scrollbar { display: none; }

.sc-item-musik {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    border: 1.5px solid transparent;
    color: #fff;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s cubic-bezier(0.22,1,0.36,1);
    font-family: var(--font-body);
    animation: sc-fade-slide 0.35s cubic-bezier(0.22,1,0.36,1) both;
}

.sc-item-musik:hover { background: rgba(255,255,255,0.1); }
.sc-item-musik:active { transform: scale(0.97); }

.sc-item-musik--aktif {
    background: rgba(75, 216, 143,0.12);
    border-color: rgba(75, 216, 143,0.35);
}

.sc-cover-musik {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: rgba(255,255,255,0.85);
}

.sc-info-musik {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sc-judul-musik {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-artis-musik {
    font-size: 11px;
    color: rgba(255,255,255,0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-list-musik .sc-item-musik:nth-child(1) { animation-delay: 0.00s; }
.sc-list-musik .sc-item-musik:nth-child(2) { animation-delay: 0.04s; }
.sc-list-musik .sc-item-musik:nth-child(3) { animation-delay: 0.08s; }
.sc-list-musik .sc-item-musik:nth-child(4) { animation-delay: 0.12s; }
.sc-list-musik .sc-item-musik:nth-child(5) { animation-delay: 0.16s; }
.sc-list-musik .sc-item-musik:nth-child(6) { animation-delay: 0.20s; }

/* ── Panel: Filter ── */
.sc-scroll-filter {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 4px 0 8px;
    scrollbar-width: none;
}

.sc-scroll-filter::-webkit-scrollbar { display: none; }

.sc-item-filter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    color: rgba(255,255,255,0.6);
    font-family: var(--font-body);
    font-size: 11px;
    transition: color 0.2s ease;
}

.sc-item-filter:hover { color: #fff; }
.sc-item-filter--aktif { color: var(--accent-lime); }

.sc-thumb-filter {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid transparent;
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-violet) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.25s cubic-bezier(0.22,1,0.36,1);
}

.sc-item-filter--aktif .sc-thumb-filter {
    border-color: var(--accent-lime);
    transform: scale(1.06);
}

.sc-label-normal { font-size: 22px; color: rgba(255,255,255,0.6); }
.sc-nama-filter { font-size: 10px; letter-spacing: 0.06em; white-space: nowrap; }

.sc-thumb-filter.filter-clarendon { filter: contrast(1.2) saturate(1.3); }
.sc-thumb-filter.filter-gingham   { filter: brightness(1.05) hue-rotate(-10deg); }
.sc-thumb-filter.filter-moon      { filter: grayscale(1) contrast(1.1); }
.sc-thumb-filter.filter-lark      { filter: contrast(0.9); }
.sc-thumb-filter.filter-reyes     { filter: sepia(0.5) contrast(0.9); }
.sc-thumb-filter.filter-juno      { filter: contrast(1.1) saturate(1.2); }
.sc-thumb-filter.filter-slumber   { filter: brightness(0.9) saturate(0.8); }
.sc-thumb-filter.filter-crema     { filter: sepia(0.3) contrast(0.95); }
.sc-thumb-filter.filter-ludwig    { filter: saturate(1.1) contrast(1.05); }

.filter-clarendon { filter: contrast(1.2) saturate(1.3); }
.filter-gingham   { filter: brightness(1.05) hue-rotate(-10deg); }
.filter-moon      { filter: grayscale(1) contrast(1.1); }
.filter-lark      { filter: contrast(0.9); }
.filter-reyes     { filter: sepia(0.5) contrast(0.9); }
.filter-juno      { filter: contrast(1.1) saturate(1.2); }
.filter-slumber   { filter: brightness(0.9) saturate(0.8); }
.filter-crema     { filter: sepia(0.3) contrast(0.95); }
.filter-ludwig    { filter: saturate(1.1) contrast(1.05); }

/* ── Bottom controls ── */
.sc-area-bawah,
.sc-bottom {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px 8px;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
}

.sc-tombol-galeri,
.sc-gallery-btn {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    border: 2px solid rgba(255,255,255,0.3);
    background: rgba(0,0,0,0.4);
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s;
}

.sc-tombol-galeri:hover { border-color: rgba(255,255,255,0.6); }

.sc-thumb-galeri,
.sc-gallery-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }

.sc-ikon-galeri,
.sc-gallery-placeholder {
    color: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-wrap-shutter,
.sc-shutter-wrap { display: flex; align-items: center; justify-content: center; }

.sc-tombol-shutter,
.sc-shutter-btn {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background 0.15s, transform 0.18s cubic-bezier(0.22,1,0.36,1);
}

.sc-lingkaran-dalam {
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    pointer-events: none;
}

.sc-tombol-shutter:hover { background: rgba(255,255,255,0.22); transform: scale(1.05); }
.sc-tombol-shutter:active { transform: scale(0.9); }

.sc-tombol-shutter--kirim,
.sc-shutter-btn--publish {
    border-color: var(--accent-lime);
    background: var(--accent-lime);
    color: #000;
    animation: sc-spring-in 0.45s cubic-bezier(0.22,1,0.36,1) both;
}

.sc-tombol-shutter--kirim .sc-lingkaran-dalam { display: none; }

.sc-tombol-shutter--muat,
.sc-shutter-btn--loading { opacity: 0.55; cursor: not-allowed; }

@keyframes sc-spring-in {
    0%   { opacity: 0; transform: scale(0.5); }
    60%  { opacity: 1; transform: scale(1.1); }
    80%  { transform: scale(0.96); }
    100% { opacity: 1; transform: scale(1); }
}

.sc-spinner {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid rgba(0,0,0,0.25);
    border-top-color: #000;
    animation: sc-spin 0.7s linear infinite;
}

.sc-spinner--lg {
    width: 36px;
    height: 36px;
    border-width: 3px;
    border-color: rgba(255,255,255,0.2);
    border-top-color: #fff;
}

.sc-prefill-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(0,0,0,0.85);
    z-index: 5;
}

.sc-prefill-loading-text {
    font-size: 13px;
    color: rgba(255,255,255,0.65);
    font-family: var(--font-body);
    letter-spacing: 0.04em;
}

@keyframes sc-spin { to { transform: rotate(360deg); } }

/* ── Gradient media overlay ── */
.sc-media-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    border-radius: inherit;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.20) 0%,
        rgba(0,0,0,0)    22%,
        rgba(0,0,0,0)    50%,
        rgba(0,0,0,0.50) 70%,
        rgba(0,0,0,0.75) 100%
    );
}

/* ── Event Prefill Banner ── */
.sc-event-prefill-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 7;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.48) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(166, 217, 106,0.25);
    border-left: 2px solid rgba(166, 217, 106,0.5);
    animation: sc-banner-fadein 0.4s ease-out both;
}

@keyframes sc-banner-fadein {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sc-event-prefill-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(166, 217, 106,0.15);
    border: 1px solid rgba(166, 217, 106,0.3);
    border-radius: 50%;
    color: var(--accent-lime, #a6d96a);
    flex-shrink: 0;
}

.sc-event-prefill-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.sc-event-prefill-label {
    font-size: 9px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.12em;
    font-weight: 600;
    text-transform: uppercase;
}

.sc-event-prefill-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-event-prefill-badge {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--accent-lime, #a6d96a);
    background: rgba(166, 217, 106,0.12);
    border: 1px solid rgba(166, 217, 106,0.3);
    padding: 3px 8px;
    border-radius: 100px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   MERCHANT CARD PREVIEW  (share toko → pratinjau kartu profil, mirip /m/{id})
   Bentuk bingkai = halaman merchant public: hero + avatar overlap + nama +
   container FOLLOWERS/EVENTS/RATING + CTA. Ukuran pakai container-query (cqw)
   relatif lebar kartu agar proporsional di frame 9:16.
   ═══════════════════════════════════════════════════════════════════════ */
.sc-mch-preview-frame {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #0d0d18;
    transition: background 0.28s ease;
}
.sc-mch-card {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: #0d0d18;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 5cqw;
    overflow: hidden;
    container-type: inline-size;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.70), 0 8px 24px rgba(0, 0, 0, 0.45);
}
.sc-mch-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(120deg, #1c2340, #3b2a63);
    overflow: hidden;
}
.sc-mch-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.92;
}
.sc-mch-hero-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 13, 24, 0) 45%, rgba(13, 13, 24, 1) 100%);
}
.sc-mch-body {
    position: relative;
    padding: 0 6cqw 6cqw;
    margin-top: -9cqw;
}
.sc-mch-avatar-wrap {
    position: relative;
    width: 20cqw;
    height: 20cqw;
}
.sc-mch-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 0.9cqw solid #0d0d18;
    background: #1e1e30;
    display: block;
}
.sc-mch-avatar--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Bebas Neue", "Arial Black", sans-serif;
    font-weight: 800;
    font-size: 10cqw;
    color: #100f16;
    background: #a6d96a;
}
.sc-mch-badge {
    position: absolute;
    right: 2%;
    bottom: 6%;
    width: 6cqw;
    height: 6cqw;
    border-radius: 50%;
    background: #a6d96a;
    color: #0d0d18;
    border: 0.7cqw solid #0d0d18;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.4cqw;
    font-weight: 900;
}
.sc-mch-name {
    margin: 3cqw 0 0;
    font-family: "Bebas Neue", "Arial Black", sans-serif;
    font-weight: 800;
    font-size: 9cqw;
    line-height: 1;
    color: #ffffff;
    letter-spacing: 0.01em;
    word-break: break-word;
}
.sc-mch-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 4cqw;
    background: #1b1b2a;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 4cqw;
    padding: 3.6cqw 1cqw;
}
.sc-mch-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1cqw;
}
.sc-mch-stat + .sc-mch-stat {
    border-left: 1px solid rgba(255, 255, 255, 0.10);
}
.sc-mch-stat-num {
    font-family: "Space Mono", monospace;
    font-size: 5.4cqw;
    font-weight: 700;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 0.6cqw;
    line-height: 1;
}
.sc-mch-stat-star {
    color: #a6d96a;
    font-size: 3.6cqw;
}
.sc-mch-stat-label {
    font-family: "Space Mono", monospace;
    font-size: 2.5cqw;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.45);
}
.sc-mch-cta {
    margin: 5cqw auto 0;
    width: max-content;
    font-family: "Space Mono", monospace;
    font-weight: 700;
    font-size: 3.4cqw;
    letter-spacing: 0.08em;
    color: #0d0d18;
    background: #a6d96a;
    padding: 2.6cqw 5.5cqw;
    border-radius: 999px;
}

/* ═══════════════════════════════════════════════════════════════════════
   EVENT CARD PREVIEW
   ═══════════════════════════════════════════════════════════════════════ */
.sc-event-preview-frame {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #0d0d18;
    transition: background 0.28s ease;
    container-type: size;
    container-name: event-frame;
}

.sc-event-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sc-event-dark-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.52) 100%);
    z-index: 1;
    pointer-events: none;
}

.sc-event-card {
    position: absolute;
    left: 5%;
    right: 5%;
    top: 50%;
    transform: translateY(-52%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: rgba(10,11,26,0.96);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    box-shadow:
        0 28px 80px rgba(0,0,0,0.70),
        0 8px 24px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.08);
}

.sc-event-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: -apple-system, BlinkMacSystemFont, "Space Grotesk", sans-serif;
    font-size: clamp(10px, 2.6cqw, 14px);
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    margin-bottom: clamp(10px, 3cqw, 16px);
}

.sc-event-card-dot {
    width: clamp(7px, 1.8cqw, 10px);
    height: clamp(7px, 1.8cqw, 10px);
    border-radius: 50%;
    background: #a6d96a;
    box-shadow: 0 0 6px rgba(166, 217, 106,0.8);
    flex-shrink: 0;
    animation: sc-pulse 2.2s ease infinite;
}

.sc-event-card-title {
    margin: 0 0 clamp(12px, 3.5cqw, 20px);
    font-family: "Syne", "Syne Italic", "Arial Black", sans-serif;
    font-style: italic;
    font-weight: 800;
    font-size: clamp(24px, 7.5cqw, 46px);
    line-height: 1.06;
    color: #8b9fe8;
    word-break: break-word;
    text-shadow: 0 2px 18px rgba(0,0,0,0.55);
    letter-spacing: -0.02em;
}

.sc-event-card-sep {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.20) 30%, rgba(255,255,255,0.20) 70%, rgba(255,255,255,0) 100%);
    margin-bottom: clamp(10px, 3cqw, 16px);
}

.sc-event-card-meta-label {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(9px, 2.2cqw, 13px);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.42);
    display: block;
    margin-bottom: clamp(6px, 1.8cqw, 10px);
}

.sc-event-card-meta-row {
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: clamp(14px, 4cqw, 22px);
}

.sc-event-card-date {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(18px, 5.2cqw, 30px);
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
}

.sc-event-card-venue {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(13px, 3.6cqw, 20px);
    font-weight: 500;
    color: rgba(255,255,255,0.68);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 55%;
}

.sc-event-card-cover-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.sc-event-card-cover-wrap::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: linear-gradient(to bottom, transparent, rgba(10,11,26,0.88));
    pointer-events: none;
}

.sc-event-card-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sc-event-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(14px, 4cqw, 22px) clamp(16px, 5cqw, 26px) clamp(18px, 5cqw, 28px);
}

.sc-event-card-price-pill {
    display: inline-flex;
    align-items: center;
    padding: clamp(9px, 2.8cqw, 15px) clamp(20px, 6cqw, 32px);
    border-radius: 100px;
    background: #a6d96a;
    box-shadow: 0 4px 24px rgba(166, 217, 106,0.38);
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(15px, 4.5cqw, 24px);
    font-weight: 700;
    color: #0a0a14;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.sc-event-card-ticket-label {
    margin-top: clamp(6px, 1.8cqw, 10px);
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(11px, 3.2cqw, 16px);
    font-weight: 500;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.01em;
}

/* ─────────────────────────────────────────────────────────────────────────
   DRAGGABLE OVERLAYS (drg-*)
   ───────────────────────────────────────────────────────────────────────── */
.drg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate3d(50cqw, 50cqh, 0) translate(-50%, -50%) scale(1);
    will-change: auto;
    transform-origin: center center;
    width: max-content;
    max-width: 80cqw;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    animation: drg-spring-in 0.45s cubic-bezier(0.22,1,0.36,1) both;
    backface-visibility: hidden;
    contain: layout style paint;
}

@keyframes drg-spring-in {
    0%   { opacity: 0; scale: 0.3; }
    60%  { opacity: 1; scale: 1.08; }
    80%  { scale: 0.97; }
    100% { opacity: 1; scale: 1; }
}

.drg-overlay--dragging {
    will-change: transform;
    transition: none !important;
    scale: 1.06;
    opacity: 0.92;
    cursor: grabbing;
    z-index: 50;
    filter: drop-shadow(0 12px 28px rgba(0,0,0,0.55));
}

.drg-overlay--selected {
    filter: drop-shadow(0 0 8px rgba(166, 217, 106,0.4));
}

.drg-overlay--selected .drg-text-content,
.drg-overlay--selected .drg-sticker-content {
    outline: 1.5px solid rgba(255,255,255,0.6);
    outline-offset: 6px;
    border-radius: 4px;
}

.drg-text-content {
    font-family: var(--font-display), sans-serif;
    font-weight: 700;
    text-align: center;
    white-space: pre-wrap;
    word-break: break-word;
    text-shadow:
        0 0 20px rgba(0,0,0,0.6),
        0 2px 8px rgba(0,0,0,0.5),
        0 1px 2px rgba(0,0,0,0.8);
    line-height: 1.2;
    padding: 4px 8px;
    transform: translateZ(0);
    min-width: 40px;
    min-height: 1em;
}

.drg-sticker-content {
    font-size: 52px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateZ(0);
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}

.drg-kontrol { position: absolute; inset: -16px; pointer-events: none; z-index: 5; }
.drg-kontrol .drg-delete-btn { pointer-events: auto; position: absolute; top: 16px; right: 16px; }

.drg-delete-btn {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0,0,0,0.75);
    border: 1.5px solid rgba(255,255,255,0.5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    animation: drg-spring-in 0.3s cubic-bezier(0.22,1,0.36,1) both;
    transition: background 0.15s, transform 0.15s cubic-bezier(0.22,1,0.36,1);
}

.drg-delete-btn:hover { background: rgba(255,48,64,0.9); transform: scale(1.2); }
.drg-delete-btn:active { transform: scale(0.9); }

/* ── Scale badge + trash + pinch ── */
.drg-scale-badge {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(0,0,0,0.65);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 100px;
    backdrop-filter: blur(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    white-space: nowrap;
    pointer-events: none;
    animation: drg-spring-in 0.25s cubic-bezier(0.22,1,0.36,1) both;
}

.drg-scale-badge--hide {
    opacity: 0;
    transform: translateX(-50%) translateY(-4px);
    pointer-events: none;
}

.drg-scale-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-lime, #a6d96a);
    box-shadow: 0 0 6px rgba(166, 217, 106,0.8);
    flex-shrink: 0;
}

.drg-scale-badge__text {
    font-family: var(--font-body, monospace);
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.04em;
}

.drg-overlay--trash .drg-text-content,
.drg-overlay--trash .drg-sticker-content {
    opacity: 0.4;
    filter: grayscale(1) sepia(0.8) hue-rotate(-50deg) saturate(2.5);
    transition: opacity 0.2s ease, filter 0.2s ease;
    transform: scale(0.82);
}

.sc-trash-zone {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 18%;
    background: linear-gradient(to top, rgba(255,48,64,0.22), transparent);
    opacity: 0;
    transition: opacity 0.22s ease;
    pointer-events: none;
    z-index: 14;
    border-radius: 0 0 16px 16px;
}

.sc-trash-zone--active { opacity: 1; }

.sc-trash-zone-icon {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,48,64,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    animation: sc-trash-pulse 0.6s ease infinite alternate;
    box-shadow: 0 0 16px rgba(255,48,64,0.6);
}

@keyframes sc-trash-pulse {
    from { transform: translateX(-50%) scale(0.9); }
    to   { transform: translateX(-50%) scale(1.1); }
}

.drg-overlay--pinching { cursor: zoom-in; }

.drg-delete-btn--ig {
    top: -14px;
    right: -14px;
    width: 28px;
    height: 28px;
    background: rgba(255,48,64,0.85);
    border-color: rgba(255,255,255,0.6);
    box-shadow: 0 2px 8px rgba(255,48,64,0.5);
}

.drg-delete-btn--ig:hover { background: rgba(255,48,64,1); transform: scale(1.25); }

/* ─────────────────────────────────────────────────────────────────────────
   AUDIO PILL (ap-*)
   ───────────────────────────────────────────────────────────────────────── */
.ap-root {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 100px;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.04em;
    cursor: pointer;
    backdrop-filter: blur(8px);
    width: 140px;
    justify-content: center;
    box-sizing: border-box;
    transition: background 0.15s;
}

.ap-root:hover { background: rgba(0,0,0,0.65); }
.ap-root:active { transform: scale(0.92); }

.ap-icon-wrap {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ap-waves {
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 2px;
    height: 14px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ap-waves--active { opacity: 1; }

.ap-bar {
    width: 2.5px;
    border-radius: 2px;
    background: #4bd88f;
    animation: ap-wave 0.8s ease-in-out infinite;
}

.ap-bar:nth-child(1) { height: 6px;  animation-delay: 0.00s; }
.ap-bar:nth-child(2) { height: 10px; animation-delay: 0.15s; }
.ap-bar:nth-child(3) { height: 6px;  animation-delay: 0.30s; }

@keyframes ap-wave {
    0%, 100% { transform: scaleY(0.6); }
    50%      { transform: scaleY(1.0); }
}

.ap-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
    text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────────
   INSTAGRAM TEXT STYLES
   ───────────────────────────────────────────────────────────────────────── */
.ig-text-classic {
    font-family: "Bebas Neue", "Arial Black", sans-serif;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
    font-weight: 600;
}

.ig-text-modern {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.ig-text-strong {
    font-family: "Arial Black", sans-serif;
    text-transform: uppercase;
    background: rgba(0,0,0,0.8);
    padding: 4px 12px;
    border-radius: 4px;
}

.ig-text-typewriter {
    font-family: "Courier New", monospace;
    background: rgba(0,0,0,0.75);
    padding: 6px 10px;
}

/* ─────────────────────────────────────────────────────────────────────────
   SEARCH OVERLAY (exp-sovl-*)
   ───────────────────────────────────────────────────────────────────────── */
.exp-search-tap {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-elevated);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 0 14px;
    height: 46px;
    width: 100%;
    color: var(--text-muted);
    user-select: none;
    transition: border-color 0.18s, background 0.18s;
}

.exp-search-tap:hover { border-color: var(--accent-lime); background: var(--bg-elevated-2); }

.exp-search-placeholder {
    flex: 1;
    font-size: 0.82rem;
    font-family: var(--font-body);
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

.exp-sovl-wrap {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100%;
    max-width: 480px;
    z-index: 300;
    transform: translateX(-50%) translateY(100%);
    transition: transform 0.38s cubic-bezier(0.22,1,0.36,1);
    will-change: transform;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 32px 80px rgba(0,0,0,0.9);
}

.exp-sovl-wrap--open { transform: translateX(-50%) translateY(0); }

.exp-sovl {
    position: absolute;
    inset: 0;
    background: var(--bg-base);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.exp-sovl-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: max(12px, env(safe-area-inset-top, 12px)) 14px 10px;
    border-bottom: 1px solid var(--border-soft);
    flex-shrink: 0;
    background: var(--bg-base);
}

.exp-sovl-back {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s;
}

.exp-sovl-back:hover { background: var(--bg-elevated-2); }

.exp-sovl-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-elevated);
    border: 1.5px solid var(--border-strong);
    border-radius: 12px;
    padding: 0 12px;
    height: 44px;
    transition: border-color 0.18s;
}

.exp-sovl-input-wrap:focus-within { border-color: var(--accent-lime); }

.exp-sovl-input-wrap svg { flex-shrink: 0; color: var(--text-muted); }

.exp-sovl-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.85rem;
    min-width: 0;
}

.exp-sovl-input::placeholder { color: var(--text-muted); }

.exp-sovl-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-elevated-2);
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s;
}

.exp-sovl-chips {
    display: flex;
    gap: 8px;
    padding: 10px 14px 8px;
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: none;
    border-bottom: 1px solid var(--border-soft);
}

.exp-sovl-chips::-webkit-scrollbar { display: none; }

.exp-sovl-count-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 6px;
    flex-shrink: 0;
}

.exp-sovl-count {
    font-size: 1.1rem;
    font-family: var(--font-display);
    letter-spacing: 0.04em;
    color: var(--text-primary);
}

.exp-sovl-results {
    flex: 1;
    overflow-y: auto;
    padding: 10px 14px calc(80px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.exp-sovl-results::-webkit-scrollbar { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .story-avatar-inner,
[data-theme="light"] .story-avatar-img { border-color: var(--bg-page); }

/* Uploading ring — Light Mode */
[data-theme="light"] .story-avatar-ring--uploading {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .story-avatar-ring--uploading::before {
    border-top-color: var(--accent-blue, #0984e3);
    border-right-color: rgba(9, 132, 227, 0.35);
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-width: 3.5px;
}

[data-theme="light"] .story-avatar-ring--uploading::after {
    animation: story-glow-pulse-light 1.5s ease-in-out infinite;
}

@keyframes story-glow-pulse-light {
    0%, 100% { box-shadow: 0 0 0 0   rgba(9, 132, 227, 0); }
    50%       { box-shadow: 0 0 0 6px rgba(9, 132, 227, 0.12); }
}

[data-theme="light"] .story-avatar-ring--uploading > .story-avatar-inner {
    color: var(--accent-blue, #0984e3);
}

[data-theme="light"] .story-username--add {
    color: var(--text-secondary, #636e72);
    font-weight: 600;
}

/* ==== page-ticket-detail.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   TICKET DETAIL PAGE  (td-*)
   Clean reimplementation — matches ticket_detail.rs exactly
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page wrapper ────────────────────────────────────────────────────────── */
.td-page {
    padding-bottom: 0; /* no extra padding — pulse strip handles it */
}

/* ── Page header title (centered between back btn and actions) ─────────────── */
.td-page-title {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.1em;
    color: var(--text-primary);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    pointer-events: none;
}

/* ── Full-page mobile layout wrapper ─────────────────────────────────────── */
.td-mobile-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* ── HERO — full-width cover image with gradient overlay ─────────────────── */
.td-hero {
    position: relative;
    width: 100%;
    height: 280px;
    margin: 0;          /* full-bleed, no side margins */
    border-radius: 0;
    overflow: hidden;
    flex-shrink: 0;
}

.td-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
}

.td-hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(8, 8, 16, 0.05)  0%,
        rgba(8, 8, 16, 0.00) 30%,
        rgba(8, 8, 16, 0.60) 70%,
        rgba(8, 8, 16, 0.95) 100%
    );
}

.td-hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Status badge (CONFIRMED etc.) */
.td-confirmed {
    display: inline-flex;
    align-self: flex-start;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--accent-lime);
    background: rgba(0, 0, 0, 0.4);
    padding: 5px 12px;
    border-radius: 100px;
    border: 1px solid rgba(166, 217, 106, 0.35);
}

.td-event-title {
    font-family: var(--font-display);
    font-size: 36px;
    color: #fff;
    line-height: 1;
    letter-spacing: 0.02em;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

/* ── STUB CARD — connected to hero, rounded bottom ────────────────────────── */
.td-stub {
    margin: 0 16px;                 /* centered with side margins */
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-top: none;               /* flush with hero bottom */
    border-radius: 0 0 24px 24px;
}

.td-stub-top {
    padding: 20px 20px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.td-stub-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.td-stub-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.td-stub-cell--right {
    text-align: right;
    align-items: flex-end;
}
.td-stub-cell--full { flex: 1; }

.td-label {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.td-val {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
}
.td-val--accent {
    color: var(--accent-lime);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
}

/* Perforated divider */
.td-perf-divider {
    position: relative;
    display: flex;
    align-items: center;
    height: 28px;
    margin: 8px 0;
}
.td-notch {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-page);
    z-index: 1;
}
.td-notch--left  { left: -14px; }
.td-notch--right { right: -14px; }
.td-dash {
    flex: 1;
    margin: 0 20px;
    border-top: 2px dashed var(--border-strong);
}

/* Bottom: QR + info */
.td-stub-bottom {
    padding: 20px 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
}

.td-qr-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.td-qr {
    background: #fff;
    border-radius: 16px;
    padding: 0;          /* qrcodegen SVG sudah punya quiet-zone sendiri */
    box-shadow: 0 0 40px rgba(166, 217, 106, 0.15);
    border: 1px solid rgba(166, 217, 106, 0.1);
    overflow: hidden;    /* clip SVG corners ke border-radius */
    line-height: 0;      /* hapus spasi inline di bawah SVG */
}
/* SVG yang di-inject via inner_html */
.td-qr > div { line-height: 0; }
.td-qr svg   { display: block; width: 170px; height: 170px; }
.td-qr-ref {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--accent-lime);
    letter-spacing: 0.12em;
    font-weight: 700;
}

/* Pills row (SECTION, ROW/SEAT) */
.td-pill-row {
    display: flex;
    gap: 10px;
    width: 100%;
}
.td-pill {
    flex: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}
.td-pill-label {
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.td-pill-val {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
}

/* Info card (security notes) */
.td-info-card {
    width: 100%;
    background: var(--bg-elevated);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid var(--border-soft);
}
.td-info-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ── ACTION BUTTONS ─────────────────────────────────────────────────────── */
.td-actions {
    padding: 16px 16px 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.td-btn {
    padding: 14px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.06em;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    transition: opacity 0.18s, transform 0.15s;
}
.td-btn:active { transform: scale(0.97); }
.td-btn--primary {
    background: var(--accent-lime);
    color: var(--text-on-accent);
}
.td-btn--ghost {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

/* ── PULSE STRIP ─────────────────────────────────────────────────────────── */
.td-pulse-strip {
    margin: 8px 16px 100px;
    padding: 14px 16px;
    background: rgba(75, 216, 143, 0.06);
    border: 1px solid rgba(75, 216, 143, 0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--live-green);
    letter-spacing: 0.1em;
    font-weight: 700;
}

/* ── EMPTY / NOT FOUND STATE ─────────────────────────────────────────────── */
.td-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 64px 24px;
    text-align: center;
    min-height: 60dvh;
}
.td-empty-state h2 {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    margin: 0;
    line-height: 1.1;
}
.td-empty-state p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    max-width: 260px;
    line-height: 1.65;
}
.td-empty-state .td-btn {
    margin-top: 8px;
    text-decoration: none;
    padding: 14px 28px;
}

/* ── Light mode ────────────────────────────────────────────────────────────── */
[data-theme="light"] .td-hero-gradient {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.05)  0%,
        rgba(0, 0, 0, 0.00) 30%,
        rgba(0, 0, 0, 0.50) 70%,
        rgba(0, 0, 0, 0.85) 100%
    );
}
[data-theme="light"] .td-event-title { color: #fff; }
[data-theme="light"] .td-page-title  { color: var(--text-primary); }
[data-theme="light"] .td-qr { border: 1px solid var(--border); box-shadow: 0 4px 20px rgba(0,0,20,0.12); }
[data-theme="light"] .td-pulse-strip { background: rgba(10, 112, 53, 0.06); border-color: rgba(10, 112, 53, 0.2); color: var(--live-green); }
[data-theme="light"] .td-stub { background: var(--bg-card); border-color: var(--border); }
[data-theme="light"] .td-pill { background: var(--bg-elevated); border-color: var(--border); }
[data-theme="light"] .td-info-card { background: var(--bg-elevated); border-color: var(--border); }
[data-theme="light"] .td-btn--primary { background: var(--accent-lime); color: var(--text-on-accent); }
[data-theme="light"] .td-btn--ghost { background: var(--bg-card); border-color: var(--border); color: var(--text-primary); }

/* ==== page-tickets.css ==== */
/* ═══════════════════════════════════════════════════════════════════════
   TICKETS LIST PAGE
   Auto-extracted from styles.css — edit this file for page-specific styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ── TICKETS ────────────────────────────────────────────────────────────────── */
.tickets-title-section {
    padding: 20px 20px 0;
}
.tickets-title {
    font-family: var(--font-display);
    font-size: 52px;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: 0.02em;
}
.tickets-count {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-secondary);
    letter-spacing: 0.08em;
    margin-top: 6px;
}
.count-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--live-green);
    animation: pulse 2s infinite;
}
.filter-tabs {
    display: flex;
    gap: 8px;
    padding: 16px 20px 0;
}
.filter-tab {
    padding: 8px 20px;
    border-radius: 100px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.04em;
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text-secondary);
    transition: all 0.2s;
}
.filter-tab--active {
    background: var(--tab-active-bg);
    color: var(--tab-active-text);
    border-color: var(--tab-active-bg);
    font-weight: 700;
}
.tickets-list {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ticket-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
}
.ticket-card--live {
    border-color: rgba(75, 216, 143, 0.3);
}
.live-badge-card {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 4px 10px;
    border-radius: 100px;
}
.ticket-cover {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}
.ticket-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ticket-event-title {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--text-primary);
    letter-spacing: 0.04em;
    line-height: 1.1;
}
.ticket-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.ticket-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.meta-label {
    font-family: var(--font-body);
    font-size: 8px;
    color: var(--text-muted);
    letter-spacing: 0.12em;
}
.meta-val {
    font-size: 12px;
    color: var(--text-primary);
}
.ticket-countdown {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}
.qr-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.qr-box {
    background: white;
    border-radius: 12px;
    padding: 12px;
    width: fit-content;
}
.qr-ref {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-secondary);
    letter-spacing: 0.1em;
}
.ticket-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ticket-venue-row {
    display: flex;
    align-items: center;
    gap: 5px;
}
.venue-name-sm {
    font-size: 11px;
    color: var(--text-muted);
}
.ticket-price {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--accent-lime);
    font-weight: 700;
}
.ticket-card--vip {
    background: linear-gradient(135deg, #3a4fff 0%, #6a35ff 100%);
    border: none;
    padding: 20px;
}
.vip-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.vip-icon-wrap {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a6d96a;
}
.vip-label {
    font-family: var(--font-body);
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.1em;
}
.vip-title {
    font-family: var(--font-display);
    font-size: 28px;
    color: white;
    letter-spacing: 0.04em;
    line-height: 1.1;
    margin-bottom: 14px;
}
.vip-meta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.vip-meta-row .meta-label {
    color: rgba(255, 255, 255, 0.5);
}
.vip-meta-row .meta-val {
    color: white;
    font-weight: 600;
}
.vip-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.vip-date {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}
.vip-price {
    font-family: var(--font-body);
    font-size: 16px;
    color: white;
    font-weight: 700;
}
.loading-state {
    display: flex;
    justify-content: center;
    padding: 60px;
}
.loading-spinner {
    width: 32px;
    height: 32px;
    border: 2px solid var(--border-strong);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.past-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 20px 20px;
}
.past-cta-text {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}
.past-cta-btn {
    background: none;
    border: none;
    color: var(--accent-lime);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PHONE FRAME — di layar >480px tampilkan mockup perangkat
   ══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 481px) {
    body {
        background: #020208;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
    .page,
    .auth-page,
    .sc-page {
        min-height: 100dvh;
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.06),
            0 32px 80px rgba(0, 0, 0, 0.9);
    }
}
[data-theme="light"] body {
    background: #b8b8d0;
}
[data-theme="light"] .page,
[data-theme="light"] .auth-page,
[data-theme="light"] .sc-page {
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.12),
        0 32px 80px rgba(0, 0, 0, 0.3);
}

/* ══════════════════════════════════════════════════════════════════════════════
   TICKETS PAGE — PAST EXPERIENCES SECTION
   ══════════════════════════════════════════════════════════════════════════════ */

.past-section {
    padding: 24px 20px 12px;
    border-top: 1px solid var(--border-soft);
}
.past-section-title {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--text-muted);
    margin: 0 0 14px;
}
.past-list {
    display: flex;
    flex-direction: column;
}
.past-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-soft);
}
.past-item:last-child {
    border-bottom: none;
}
.past-item-date {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    flex-shrink: 0;
    min-width: 58px;
}
.past-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.past-item-title {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.past-item-venue {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.past-item-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.past-item-price-col {
    display: flex;
    flex-direction: column;
    gap: 1px;
    align-items: flex-end;
}
.past-item-price-label {
    font-family: var(--font-body);
    font-size: 8px;
    letter-spacing: 0.12em;
    color: var(--text-muted);
}
.past-item-price {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}
.past-item-dl,
.past-item-star {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}
.past-item-dl:hover {
    background: var(--bg-elevated-2);
    color: var(--accent-blue);
}
.past-item-star:hover {
    background: var(--bg-elevated-2);
    color: var(--warning-amber);
}

/* ==== profile_premium.css ==== */
.profile-premium-banner {
  display: flex; align-items: center; gap: 12px;
  margin: 0 16px 16px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, #1a2a10, #0d1c08);
  border: 1px solid rgba(166, 217, 106,0.25);
  text-decoration: none;
}
.profile-premium-crown { font-size: 28px; }
.profile-premium-text  { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.profile-premium-title { font-size: 14px; font-weight: 700; color: #a6d96a; }
.profile-premium-sub   { font-size: 11px; color: rgba(166, 217, 106,0.6); }
.profile-premium-cta   {
  background: linear-gradient(135deg, #a6d96a 0%, #4bd88f 100%);
  color: #0a0a14;
  font-size: 12px; font-weight: 800;
  padding: 8px 16px; border-radius: 16px;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(166, 217, 106, 0.25);
  flex-shrink: 0;
}

.menu-item--premium         { background: rgba(166, 217, 106,0.06) !important;
                               border-color: rgba(166, 217, 106,0.18) !important; }
.menu-item--premium .menu-item-label { color: #a6d96a; }
.menu-item-icon--premium    { background: rgba(166, 217, 106,0.12) !important;
                               color: #a6d96a; font-size:16px; }
.menu-badge-active          { font-size:9px; font-weight:800; padding:2px 7px;
                               border-radius:100px; background:#a6d96a; color:#0a0a14; }
.menu-badge-new             { font-size:9px; font-weight:800; padding:2px 7px;
                               border-radius:100px; background:rgba(166, 217, 106,0.2);
                               color:#a6d96a; }
.story-avatar-ring--upgrade { background: linear-gradient(135deg,#f7b42c,#fc575e); }
.story-username--upgrade    { color: #f7b42c; font-weight: 700; }

/* ==== subscription.css ==== */
/* ─────────────────────────────────────────────────────────────────────────────
   subscription.css  —  Kinetic Premium Subscription Page
   Tambahkan @import ke file CSS utama:
     @import "./subscription.css";
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Page shell ──────────────────────────────────────────────────────────────── */
.sub-page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  width: 100%;
  background: var(--bg-page);
  color: var(--text-primary);
  padding-bottom: 160px;
  overflow-x: hidden;
  position: relative;
}

/* ── Header (extend .page-header dari components.css) ────────────────────────── */
/* Tidak perlu redefine — .page-header sudah handle sticky, border-bottom, flex.
   Hanya tambahkan bg blur agar konsisten saat scroll */
.sub-page .page-header {
  background: rgba(13, 13, 24, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Title premium dengan gradient khas — modifier opsional di atas .page-title */
.page-title--premium {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #a6d96a 0%, #4bd88f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Hero ────────────────────────────────────────────────────────────────────── */
.sub-hero {
  text-align: center;
  padding: 40px 24px 32px;
  background: linear-gradient(180deg,
    rgba(166, 217, 106, 0.06) 0%,
    transparent 100%);
  position: relative;
}

.sub-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 280px; height: 280px;
  background: radial-gradient(
    ellipse at center,
    rgba(166, 217, 106, 0.12) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.sub-hero-crown {
  font-size: 48px;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 18px rgba(166, 217, 106,0.4));
  animation: sub-float 3s ease-in-out infinite;
}

@keyframes sub-float {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-6px); }
}

.sub-hero-title {
  font-size: clamp(24px, 6vw, 32px);
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 12px;
  color: #fff;
}

.sub-hero-accent {
  background: linear-gradient(135deg, #a6d96a 0%, #4bd88f 60%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sub-hero-sub {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.60);
  max-width: 320px;
  margin: 0 auto;
}

.sub-active-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding: 8px 16px;
  border-radius: 100px;
  background: rgba(166, 217, 106, 0.12);
  border: 1px solid rgba(166, 217, 106, 0.35);
  color: #a6d96a;
  font-size: 13px;
  font-weight: 600;
}

/* ── Sections ────────────────────────────────────────────────────────────────── */
.sub-benefits,
.sub-plans,
.sub-compare,
.sub-testimonials {
  padding: 0 16px 28px;
}

.sub-section-title {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 1.5px;
  margin: 0 0 16px;
  color: var(--text-primary);
}

/* ── Benefit list ────────────────────────────────────────────────────────────── */
.sub-benefit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sub-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  transition: background 0.15s;
}
.sub-benefit-item:hover {
  background: rgba(255,255,255,0.07);
}

.sub-benefit-emoji {
  font-size: 22px;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(166, 217, 106,0.08);
  border-radius: 10px;
}

.sub-benefit-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sub-benefit-title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.sub-benefit-desc {
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.sub-benefit-check {
  flex-shrink: 0;
  color: #a6d96a;
  margin-top: 2px;
}

/* ── Plan cards ──────────────────────────────────────────────────────────────── */
.sub-plan-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.sub-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 18px 16px 16px;
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.sub-plan-card:active {
  transform: scale(0.97);
}
.sub-plan-card--selected {
  border-color: #a6d96a;
  background: rgba(166, 217, 106, 0.08);
}

.sub-plan-header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  flex-wrap: wrap;
}

.sub-plan-label {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.sub-plan-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 2px 7px;
  border-radius: 100px;
  background: #a6d96a;
  color: #0a0a14;
  text-transform: uppercase;
}

.sub-plan-price {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.5px;
  color: var(--text-primary);
  margin-top: 4px;
}

.sub-plan-per-month {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
}

.sub-plan-savings {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #a6d96a;
  padding: 2px 8px;
  border-radius: 100px;
  background: rgba(166, 217, 106,0.12);
  margin-top: 4px;
}

.sub-plan-radio {
  position: absolute;
  top: 14px; right: 14px;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s;
}
.sub-plan-card--selected .sub-plan-radio {
  border-color: #a6d96a;
}
.sub-plan-radio-inner {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #a6d96a;
  transform: scale(0);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sub-plan-radio-inner--checked {
  transform: scale(1);
}

/* ── Comparison table ────────────────────────────────────────────────────────── */
.sub-compare-table {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}

.sub-compare-header {
  display: grid;
  grid-template-columns: 1fr 80px 90px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.06);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.50);
}

.sub-compare-tier-col--premium {
  color: #a6d96a;
}

.sub-compare-row {
  display: grid;
  grid-template-columns: 1fr 80px 90px;
  padding: 11px 16px;
  border-top: 1px solid rgba(255,255,255,0.05);
  font-size: 13px;
  align-items: center;
}

.sub-compare-row:nth-child(odd) {
  background: rgba(255,255,255,0.02);
}

.sub-compare-feature {
  color: rgba(255,255,255,0.75);
}

.sub-compare-free {
  color: rgba(255,255,255,0.35);
  text-align: center;
}

.sub-compare-premium {
  color: #a6d96a;
  text-align: center;
  font-weight: 600;
}

/* ── Testimonials ────────────────────────────────────────────────────────────── */
.sub-testi-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sub-testi-card {
  margin: 0;
  padding: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  position: relative;
}

.sub-testi-card::before {
  content: '"';
  position: absolute;
  top: 10px; left: 16px;
  font-size: 48px;
  line-height: 1;
  color: rgba(166, 217, 106,0.15);
  font-family: Georgia, serif;
  pointer-events: none;
}

.sub-testi-stars {
  font-size: 13px;
  color: #a6d96a;
  margin-bottom: 8px;
  letter-spacing: 2px;
}

.sub-testi-quote {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
  margin: 0 0 10px;
  padding-top: 4px;
}

.sub-testi-user {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.40);
}

/* ── Sticky CTA ──────────────────────────────────────────────────────────────── */
.sub-cta-sticky {
  position: fixed;
  bottom: 0; left: 50%; right: auto;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;       /* ikut lebar page */
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: rgba(13, 13, 24, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 30;
}

.sub-cta-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #fca5a5;
  font-size: 13px;
}

.sub-cta-success {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(166, 217, 106, 0.10);
  border: 1px solid rgba(166, 217, 106, 0.25);
  color: #a6d96a;
  font-size: 13px;
  font-weight: 600;
}

.sub-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #a6d96a 0%, #4bd88f 100%);
  color: #0a0a14;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  box-shadow: 0 4px 24px rgba(166, 217, 106, 0.30);
  -webkit-tap-highlight-color: transparent;
}
.sub-cta-btn:active { transform: scale(0.98); }
.sub-cta-btn:disabled { opacity: 0.65; cursor: not-allowed; }
.sub-cta-btn--loading { opacity: 0.75; }

.sub-cta-spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2.5px solid rgba(10,10,20,0.25);
  border-top-color: #0a0a14;
  border-radius: 50%;
  animation: sub-spin 0.7s linear infinite;
}

@keyframes sub-spin { to { transform: rotate(360deg); } }

.sub-cta-already {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(166, 217, 106,0.08);
  border: 1px solid rgba(166, 217, 106,0.20);
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
}

.sub-cta-explore-link {
  color: #a6d96a;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}

.sub-cta-terms {
  font-size: 11px;
  color: rgba(255,255,255,0.30);
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

.sub-cta-link {
  color: rgba(255,255,255,0.50);
  text-decoration: underline;
}

/* ── Responsive (tablet ke atas) ─────────────────────────────────────────────── */
@media (min-width: 480px) {
  .sub-plan-cards {
    max-width: 480px;
    margin: 0 auto;
  }
}

/* ── Subscription checkout page ──────────────────────────────────────────────── */
.sub-pay-page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  width: 100%;
  background: var(--bg-page);
  color: var(--text-primary);
  padding-bottom: 140px;
  overflow-x: hidden;
  position: relative;
}

.sub-pay-page .page-header {
  background: rgba(13, 13, 24, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.sub-pay-body {
  padding: 20px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sub-pay-section-title {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 1.5px;
  margin: 0 0 12px;
  color: var(--text-primary);
}

.sub-pay-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sub-pay-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.sub-pay-label { color: var(--text-secondary); }
.sub-pay-value { color: var(--text-primary); font-weight: 600; }

.sub-pay-row--total {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 12px;
  margin-top: 4px;
}

.sub-pay-total {
  font-size: 20px;
  font-family: var(--font-display);
  letter-spacing: 0.5px;
  color: #a6d96a;
}

.sub-pay-row--code { opacity: 0.6; }
.sub-pay-code { font-size: 12px; letter-spacing: 0.05em; color: var(--text-secondary); }

.sub-pay-method-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sub-pay-method {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.09);
  border-radius: 16px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
}

.sub-pay-method--selected {
  border-color: #a6d96a;
  background: rgba(166, 217, 106,0.06);
}

.sub-pay-method-radio {
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s;
}

.sub-pay-method--selected .sub-pay-method-radio { border-color: #a6d96a; }

.sub-pay-method-radio-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #a6d96a;
  transform: scale(0);
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}

.sub-pay-method-radio-dot--on { transform: scale(1); }

.sub-pay-method-text {
  display: flex; flex-direction: column; gap: 2px;
}

.sub-pay-method-label {
  font-size: 13px; font-weight: 700; color: var(--text-primary);
}

.sub-pay-method-sub {
  font-size: 11px; color: var(--text-secondary);
}

.sub-pay-error {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.25);
  color: #fca5a5; font-size: 13px;
}

.sub-pay-sticky {
  position: fixed;
  bottom: 0; left: 50%; right: auto;
  transform: translateX(-50%);
  width: 100%; max-width: 480px;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: rgba(13,13,24,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex; flex-direction: column; gap: 8px;
  z-index: 30;
}

.sub-pay-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 72px 24px; text-align: center;
}

.sub-pay-empty-crown {
  font-size: 52px;
  filter: drop-shadow(0 0 18px rgba(166, 217, 106,0.35));
  animation: sub-float 3s ease-in-out infinite;
  line-height: 1;
}

.sub-pay-empty-title {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--text-primary);
  margin: 4px 0 0;
}

.sub-pay-empty-desc {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 260px;
  line-height: 1.6;
  margin: 0;
}

.sub-pay-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 12px 24px;
  border-radius: 14px;
  background: linear-gradient(135deg, #a6d96a 0%, #4bd88f 100%);
  color: #0a0a14;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.04em;
}

/* ── Hero banner ─────────────────────────────────────────────────────────────── */
.sub-pay-hero-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 20px 20px;
  background: rgba(166, 217, 106,0.06);
  border: 1px solid rgba(166, 217, 106,0.18);
  border-radius: 22px;
  overflow: hidden;
}

.sub-pay-hero-glow {
  position: absolute;
  top: -40px; left: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(ellipse, rgba(166, 217, 106,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.sub-pay-hero-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sub-pay-hero-crown {
  font-size: 36px;
  filter: drop-shadow(0 0 12px rgba(166, 217, 106,0.5));
  flex-shrink: 0;
}

.sub-pay-hero-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #a6d96a 0%, #4bd88f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 3px;
}

.sub-pay-hero-plan {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.70);
  margin: 0;
}

.sub-pay-hero-amount {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.5px;
  color: #a6d96a;
  margin: 0;
  flex-shrink: 0;
}

/* ── Order code pill ─────────────────────────────────────────────────────────── */
.sub-pay-code-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 100px;
  font-size: 12px;
  color: var(--text-secondary);
  align-self: flex-start;
}

.sub-pay-code-pill svg { opacity: 0.5; flex-shrink: 0; }

/* ── Payment method icon ─────────────────────────────────────────────────────── */
.sub-pay-method-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.55);
  transition: background 0.2s, color 0.2s;
}

.sub-pay-method-icon--on {
  background: rgba(166, 217, 106,0.12);
  color: #a6d96a;
}

/* ── Secure note ─────────────────────────────────────────────────────────────── */
.sub-pay-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255,255,255,0.30);
  padding: 4px 0 8px;
}

/* ── Light mode: new elements ────────────────────────────────────────────────── */
[data-theme="light"] .sub-pay-hero-banner {
  background: rgba(61,102,0,0.05);
  border-color: rgba(61,102,0,0.18);
}

[data-theme="light"] .sub-pay-hero-glow {
  background: radial-gradient(ellipse, rgba(61,102,0,0.10) 0%, transparent 70%);
}

[data-theme="light"] .sub-pay-hero-tag {
  background: linear-gradient(135deg, #3d6600 0%, #0a7035 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .sub-pay-hero-plan { color: var(--text-secondary); }
[data-theme="light"] .sub-pay-hero-amount { color: #3d6600; }

[data-theme="light"] .sub-pay-code-pill {
  background: var(--bg-card);
  border-color: var(--border);
}

[data-theme="light"] .sub-pay-method-icon { background: var(--bg-elevated); color: var(--text-secondary); }
[data-theme="light"] .sub-pay-method-icon--on { background: rgba(61,102,0,0.10); color: #3d6600; }

[data-theme="light"] .sub-pay-secure { color: var(--text-muted); }

[data-theme="light"] .sub-pay-empty-title { color: var(--text-primary); }
[data-theme="light"] .sub-pay-empty-desc { color: var(--text-secondary); }

[data-theme="light"] .sub-pay-back-link {
  background: linear-gradient(135deg, #3d6600 0%, #0a7035 100%);
  color: #fff;
}

/* Light mode */
[data-theme="light"] .sub-pay-page .page-header {
  background: rgba(243,243,251,0.92);
  border-bottom-color: var(--border);
}

[data-theme="light"] .sub-pay-card {
  background: var(--bg-card);
  border-color: var(--border);
}

[data-theme="light"] .sub-pay-row--total { border-top-color: var(--border); }

[data-theme="light"] .sub-pay-total { color: #3d6600; }

[data-theme="light"] .sub-pay-method {
  background: var(--bg-card);
  border-color: var(--border-strong);
}

[data-theme="light"] .sub-pay-method--selected {
  border-color: #3d6600;
  background: rgba(61,102,0,0.05);
}

[data-theme="light"] .sub-pay-method--selected .sub-pay-method-radio { border-color: #3d6600; }
[data-theme="light"] .sub-pay-method-radio-dot { background: #3d6600; }
[data-theme="light"] .sub-pay-method-radio { border-color: rgba(0,0,20,0.25); }

[data-theme="light"] .sub-pay-sticky {
  background: rgba(243,243,251,0.96);
  border-top-color: var(--border);
}

[data-theme="light"] .sub-pay-back-link { color: #3d6600; }

/* ── Light mode overrides ─────────────────────────────────────────────────────── */
[data-theme="light"] .sub-page .page-header {
  background: rgba(243, 243, 251, 0.92);
  border-bottom-color: var(--border);
}

[data-theme="light"] .sub-hero {
  background: linear-gradient(180deg,
    rgba(61, 102, 0, 0.05) 0%,
    transparent 100%);
}

[data-theme="light"] .sub-hero::before {
  background: radial-gradient(
    ellipse at center,
    rgba(61, 102, 0, 0.08) 0%,
    transparent 70%
  );
}

[data-theme="light"] .sub-hero-title {
  color: var(--text-primary);
}

[data-theme="light"] .sub-hero-sub {
  color: var(--text-secondary);
}

[data-theme="light"] .sub-active-badge {
  background: rgba(61, 102, 0, 0.08);
  border-color: rgba(61, 102, 0, 0.25);
  color: #3d6600;
}

/* Benefit items */
[data-theme="light"] .sub-benefit-item {
  background: var(--bg-card);
  border-color: var(--border);
}
[data-theme="light"] .sub-benefit-item:hover {
  background: var(--bg-card-hover);
}

[data-theme="light"] .sub-benefit-emoji {
  background: rgba(61, 102, 0, 0.08);
}

[data-theme="light"] .sub-benefit-check {
  color: #3d6600;
}

/* Plan cards */
[data-theme="light"] .sub-plan-card {
  background: var(--bg-card);
  border-color: var(--border-strong);
}
[data-theme="light"] .sub-plan-card--selected {
  border-color: #3d6600;
  background: rgba(61, 102, 0, 0.05);
}

[data-theme="light"] .sub-plan-label {
  color: var(--text-primary);
}

[data-theme="light"] .sub-plan-price {
  color: var(--text-primary);
}

[data-theme="light"] .sub-plan-per-month {
  color: var(--text-muted);
}

[data-theme="light"] .sub-plan-savings {
  color: #3d6600;
  background: rgba(61, 102, 0, 0.08);
}

[data-theme="light"] .sub-plan-radio {
  border-color: rgba(0, 0, 20, 0.25);
}
[data-theme="light"] .sub-plan-card--selected .sub-plan-radio {
  border-color: #3d6600;
}
[data-theme="light"] .sub-plan-radio-inner {
  background: #3d6600;
}

[data-theme="light"] .sub-plan-badge {
  background: #3d6600;
  color: #fff;
}

/* Compare table */
[data-theme="light"] .sub-compare-table {
  border-color: var(--border-strong);
}

[data-theme="light"] .sub-compare-header {
  background: var(--bg-elevated);
  color: var(--text-muted);
}

[data-theme="light"] .sub-compare-tier-col--premium {
  color: #3d6600;
}

[data-theme="light"] .sub-compare-row {
  border-top-color: var(--border);
}
[data-theme="light"] .sub-compare-row:nth-child(odd) {
  background: rgba(0, 0, 20, 0.02);
}

[data-theme="light"] .sub-compare-feature {
  color: var(--text-primary);
}

[data-theme="light"] .sub-compare-free {
  color: var(--text-muted);
}

[data-theme="light"] .sub-compare-premium {
  color: #3d6600;
}

/* Testimonials */
[data-theme="light"] .sub-testi-card {
  background: var(--bg-card);
  border-color: var(--border);
}

[data-theme="light"] .sub-testi-card::before {
  color: rgba(61, 102, 0, 0.15);
}

[data-theme="light"] .sub-testi-stars {
  color: #3d6600;
}

[data-theme="light"] .sub-testi-quote {
  color: var(--text-secondary);
}

[data-theme="light"] .sub-testi-user {
  color: var(--text-muted);
}

/* Sticky CTA */
[data-theme="light"] .sub-cta-sticky {
  background: rgba(243, 243, 251, 0.96);
  border-top-color: var(--border);
}

[data-theme="light"] .sub-cta-already {
  background: rgba(61, 102, 0, 0.06);
  border-color: rgba(61, 102, 0, 0.20);
  color: var(--text-primary);
}

[data-theme="light"] .sub-cta-explore-link {
  color: #3d6600;
}

[data-theme="light"] .sub-cta-btn {
  background: linear-gradient(135deg, #3d6600 0%, #0a7035 100%);
  color: #fff;
  box-shadow: 0 4px 24px rgba(61, 102, 0, 0.25);
}

[data-theme="light"] .sub-cta-terms {
  color: var(--text-muted);
}

[data-theme="light"] .sub-cta-link {
  color: var(--text-secondary);
}

[data-theme="light"] .sub-cta-success {
  background: rgba(61, 102, 0, 0.08);
  border-color: rgba(61, 102, 0, 0.25);
  color: #3d6600;
}

/* Title gradient — stay lime on dark, adapt on light */
[data-theme="light"] .page-title--premium {
  background: linear-gradient(135deg, #3d6600 0%, #0a7035 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .sub-hero-accent {
  background: linear-gradient(135deg, #3d6600 0%, #0a7035 60%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==== live-viewer-unmute (appended) ==== */
.live-viewer-unmute-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 14px;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 3;
}
.live-viewer-unmute-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s;
}
.live-viewer-unmute-overlay:active .live-viewer-unmute-pill { transform: scale(0.96); }


/* ===== page-meet.css ===== */
/* page-meet.css — Halaman "Meet" (konferensi P2P mesh, gaya Google Meet). */

.meet-page {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #0a0a0f;
    color: #fff;
    font-family: var(--font-body);
    overflow: hidden;
}

/* ── Top bar (in-meet) ─────────────────────────────────────────────────────── */
.meet-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    flex: 0 0 auto;
    z-index: 5;
}

.meet-topbar-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.01em;
}

.meet-topbar-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 11px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 20px;
}

/* ── Panggung & grid tile ─────────────────────────────────────────────────── */
.meet-stage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px 96px;
}

.meet-hidden {
    display: none !important;
}

.meet-tiles {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-auto-rows: 1fr;
    gap: 10px;
    align-content: center;
    justify-items: center;
}

/* Green room: hanya tile self, besar & terpusat. */
.meet-tiles--solo {
    grid-template-columns: minmax(0, 720px);
    grid-auto-rows: auto;
}

.meet-tile {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    background: #16161f;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.meet-tiles--solo .meet-tile {
    aspect-ratio: 16 / 9;
    max-height: 60vh;
}

/* Tandai tile sendiri (cincin biru, seperti highlight di Google Meet). */
.meet-tile--self {
    outline: 2px solid var(--accent-blue);
    outline-offset: -2px;
}

.meet-tile-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #16161f;
}

/* Mirror hanya kamera sendiri (seperti Google Meet); remote tidak di-mirror. */
.meet-tile--self .meet-tile-video {
    transform: scaleX(-1);
}

/* Avatar fallback saat kamera off. */
.meet-tile-avatar {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: #1f1f2b;
}

.meet-tile-avatar span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: var(--accent-lime, #c3f53c);
    color: #0a0a14;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 32px;
    text-transform: uppercase;
}

.meet-tile.cam-off .meet-tile-video {
    display: none;
}

.meet-tile.cam-off .meet-tile-avatar {
    display: flex;
}

/* Bar nama + ikon mic di pojok tile. */
.meet-tile-bar {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 20px);
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.meet-tile-name {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ikon mic-off hanya tampil saat peserta mute. */
.meet-tile-mic {
    display: none;
    align-items: center;
    color: #ff5c5c;
}

.meet-tile.mic-off .meet-tile-mic {
    display: inline-flex;
}

.meet-tile.mic-off .meet-tile-bar {
    background: rgba(180, 30, 30, 0.55);
}

/* ── Control bar ──────────────────────────────────────────────────────────── */
.meet-controls {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    background: rgba(20, 20, 28, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 40px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10;
}

.meet-ctrl {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    transition: transform 0.12s, background 0.15s;
}

.meet-ctrl:hover {
    background: rgba(255, 255, 255, 0.2);
}

.meet-ctrl:active {
    transform: scale(0.94);
}

/* Mic/kamera dalam keadaan OFF → merah (gaya Google Meet). */
.meet-ctrl--off {
    background: #ea4335;
}

.meet-ctrl--off:hover {
    background: #f0584a;
}

.meet-ctrl--leave {
    background: #ea4335;
    width: 58px;
}

.meet-ctrl--leave:hover {
    background: #f0584a;
}

.meet-ctrl-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #0a0a14;
    background: var(--accent-lime, #c3f53c);
    border-radius: 9px;
}

/* ── Green room (prejoin) ─────────────────────────────────────────────────── */
.meet-prejoin-mode .meet-stage {
    padding-bottom: 8px;
}

.meet-prejoin {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 8px 20px 28px;
    text-align: center;
}

.meet-prejoin-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
}

.meet-prejoin-sub {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    max-width: 340px;
    margin-top: -4px;
}

.meet-prejoin-toggles {
    display: flex;
    gap: 14px;
    margin: 4px 0;
}

.meet-prejoin-join {
    min-width: 200px;
}

.meet-prejoin-back {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    text-decoration: none;
    padding: 6px;
}

.meet-prejoin-back:hover {
    color: #fff;
}

/* ── Input & tombol ───────────────────────────────────────────────────────── */
.meet-input {
    width: 100%;
    max-width: 340px;
    padding: 12px 14px;
    font-size: 14px;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    outline: none;
}

.meet-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.meet-input:focus {
    border-color: var(--accent-lime, #c3f53c);
}

.meet-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.12s, opacity 0.12s;
}

.meet-btn:active {
    transform: scale(0.97);
}

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

.meet-btn--primary {
    background: var(--accent-lime, #c3f53c);
    border-color: var(--accent-lime, #c3f53c);
    color: #0a0a14;
}

.meet-btn--ghost {
    background: transparent;
    color: #ff7a7a;
    border-color: #ff7a7a;
}

.meet-btn--small {
    padding: 8px 14px;
    font-size: 12px;
}

/* ── Panel orang (host): undangan + ruang tunggu ──────────────────────────── */
.meet-people {
    position: absolute;
    top: 12px;
    right: 12px;
    bottom: 92px;
    width: min(340px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    background: #15151d;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    z-index: 20;
}

.meet-people-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
}

.meet-people-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    cursor: pointer;
}

.meet-people-close:hover {
    color: #fff;
}

.meet-invite-label,
.meet-waitroom-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 10px;
}

.meet-invite-row {
    display: flex;
    gap: 8px;
}

.meet-invite-input {
    flex: 1;
    max-width: none;
    font-size: 12px;
}

.meet-waitroom-empty {
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
}

.meet-wait-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.meet-wait-item:first-of-type {
    border-top: none;
}

.meet-wait-name {
    font-size: 14px;
    font-weight: 600;
}

.meet-wait-actions {
    display: flex;
    gap: 8px;
}

/* ── Layar status terpusat ────────────────────────────────────────────────── */
.meet-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 40px 24px;
    text-align: center;
    color: #fff;
}

.meet-result-icon {
    font-size: 44px;
}

.meet-waiting-text {
    color: rgba(255, 255, 255, 0.7);
}

.meet-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid rgba(255, 255, 255, 0.18);
    border-top-color: var(--accent-lime, #c3f53c);
    border-radius: 50%;
    animation: meet-spin 0.8s linear infinite;
}

@keyframes meet-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Tombol MEET di Merchant Hub (pil terisi, konsisten dgn LIVE & SCAN) ───── */
.mhub-meet-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 100px;
    background: var(--accent-blue);
    color: #fff;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.15s;
    flex-shrink: 0;
}
.mhub-meet-btn:hover {
    opacity: 0.88;
}
.mhub-meet-btn:active {
    transform: scale(0.94);
}

/* ── Tombol control aktif (chat/share toggle ON) ──────────────────────────── */
.meet-ctrl--on {
    background: var(--accent-blue);
}
.meet-ctrl--on:hover {
    background: var(--accent-blue);
    opacity: 0.9;
}

/* ── Panel chat dalam meet ────────────────────────────────────────────────── */
.meet-chat {
    position: fixed;
    top: 12px;
    right: 12px;
    bottom: 92px;
    width: min(340px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    background: #15151d;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    z-index: 20;
    overflow: hidden;
}
.meet-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    flex: 0 0 auto;
}
.meet-chat-msgs {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.meet-chat-msg {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.meet-chat-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-lime, #c3f53c);
}
.meet-chat-text {
    font-size: 14px;
    color: #fff;
    word-break: break-word;
}
.meet-chat-input-row {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex: 0 0 auto;
}
.meet-chat-input-row .meet-input {
    flex: 1;
    max-width: none;
}

/* Saat berbagi layar, tile sendiri JANGAN di-mirror (teks layar harus normal). */
.meet-tile--self.meet-sharing .meet-tile-video {
    transform: none;
}
.meet-tile--self.meet-sharing .meet-tile-video {
    object-fit: contain;
    background: #000;
}

/* ===== Header Merchant Hub / Pusat Admin — penempatan icon ===================
   Masalah lama: 3 pill (LIVE/MEET/SCAN) padding & gap tak konsisten (tinggi
   pill beda → icon terlihat tak sejajar), .mhub-scan-btn tanpa flex-shrink
   (memendek duluan), dan di layar sempit flex-wrap membuat tombol turun baris
   berantakan. Fix: samakan metrik semua pill, kunci SATU baris (tanpa wrap),
   dan di ≤520px label teks disembunyikan → pill jadi lingkaran 38px yang
   seragam dengan ThemeToggle & tombol lonceng. */

.mhub-header { gap: 10px; }
.mhub-header-left { flex-shrink: 0; min-width: 0; }
.mhub-header-right { flex-shrink: 0; }
.mhub-header-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Metrik seragam untuk ketiga pill: tinggi, padding, gap, dan baseline sama. */
.mhub-live-btn,
.mhub-meet-btn,
.mhub-scan-btn {
    height: 34px;
    padding: 0 12px;
    gap: 6px;
    line-height: 1;
    flex-shrink: 0;
    justify-content: center;
}
/* SVG di dalam pill/tombol bulat jangan ikut menyusut. */
.mhub-header-right svg { flex-shrink: 0; }

/* Layar sempit (Android umum): sembunyikan label → icon-only, lingkaran 38px
   seragam dengan .theme-toggle / .mhub-bell-btn — semua muat satu baris. */
@media (max-width: 520px) {
    .mhub-btn-label { display: none; }
    .mhub-live-btn,
    .mhub-meet-btn,
    .mhub-scan-btn {
        width: 38px;
        height: 38px;
        padding: 0;
        border-radius: 50%;
    }
    .mhub-header-title { font-size: 18px; }
    .mhub-header-right { gap: 6px; }
}
/* ===== payment-success: judul responsif (override) ===== */
.ps-title { font-size: clamp(32px, 11vw, 46px); line-height: 1.05; }

/* ===== page-event-detail: live PiP ===== */
}

/* ── Live PiP melayang (merchant sedang siaran) ───────────────────────────── */
.mlpip {
    position: fixed;
    right: 14px;
    bottom: 84px; /* di atas bottom-nav */
    z-index: 120;
    width: 200px;
    max-width: 46vw;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
}
.mlpip-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    cursor: pointer;
}
.mlpip-video .live-viewer,
.mlpip-video .live-viewer-video-wrap,
.mlpip-video .live-viewer-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Mode mini: sembunyikan kontrol/teks viewer penuh. */
.mlpip-video .live-viewer-header,
.mlpip-video .live-viewer-controls,
.mlpip-video .live-viewer-viewers {
    display: none !important;
}
.mlpip-close {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mlpip-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #c0152b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
}
.mlpip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
    animation: mlpip-blink 1.2s infinite;
}
@keyframes mlpip-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.mlpip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== PiP draggable override ===== */
/* ── PiP override: lebih kecil + draggable ────────────────────────────────── */
.mlpip {
    width: 150px;
    max-width: 42vw;
    cursor: move;
    touch-action: none; /* drag di mobile tidak memicu scroll */
    user-select: none;
    -webkit-user-select: none;
}
.mlpip-video { cursor: move; }
.mlpip-bar { cursor: move; }
.mlpip-grip {
    margin-left: auto;
    opacity: 0.75;
    font-size: 12px;
    letter-spacing: -1px;
}

/* ===== ed-live immersive override ===== */
/* ── Live section di event detail: pemutar imersif (bukan kartu kaku) ──────── */
.ed-live-section .ed-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.ed-live-section .ed-section-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--danger, #e23744);
    box-shadow: 0 0 0 4px rgba(226, 55, 68, 0.18);
    animation: live-pulse 1.2s ease-in-out infinite;
}
.ed-live-section .live-viewer {
    position: relative;
    gap: 0;
    border: none;
    border-radius: 18px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
}
/* Header (nama merchant + badge) melayang di atas video, bukan bar kaku. */
.ed-live-section .live-viewer-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 12px 14px 26px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
.ed-live-section .live-viewer-merchant {
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
.ed-live-section .live-viewer-video-wrap {
    aspect-ratio: 16 / 9;
    border-radius: 18px;
}
/* Kontrol (penonton + tombol) melayang di bawah video. */
.ed-live-section .live-viewer-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 26px 14px 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0));
}
.ed-live-section .live-viewer-viewers {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.ed-live-section .live-viewer-error {
    margin: 10px 12px;
}

.mlpip { will-change: transform; }

/* ===== ed-more grid ===== */
/* ── Event lain di bawah detail (grid marketplace) ────────────────────────── */
.ed-more { margin-top: 6px; }
.ed-more-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 12px;
}
/* Tetap 2 kolom di semua ukuran (konsisten dgn Explore). */
@media (min-width: 640px) {
    .ed-more-grid { gap: 16px; }
}

/* ── Social proof strip + stock bar (marketplace, data asli variant) ──────── */
.ed-social-proof {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 12px 0 14px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 6px;
}
.ed-sp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ed-sp-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}
.ed-sp-item svg { opacity: .8; flex-shrink: 0; }
.ed-sp-item b { color: var(--text-primary); font-weight: 800; }
.ed-sp-verified { color: var(--accent-lime); }
.ed-sp-verified svg { opacity: 1; }
.ed-sp-stock { display: flex; flex-direction: column; gap: 5px; }
.ed-sp-bar {
    height: 6px;
    border-radius: 100px;
    background: var(--bg-elevated);
    overflow: hidden;
}
.ed-sp-bar-fill {
    height: 100%;
    border-radius: 100px;
    background: var(--accent-lime);
    transition: width .5s ease;
}
.ed-sp-bar-fill--low { background: linear-gradient(90deg, #ff8a3d, #ff2d55); }
.ed-sp-remain { font-size: 11.5px; color: var(--text-secondary); }
.ed-sp-remain b { color: var(--text-primary); font-weight: 800; }
.ed-sp-low { color: #ff5b3d; }
.ed-sp-low b { color: #ff5b3d; }

/* ═══ Marketplace polish lintas-halaman (orders • tickets • profile • cart) ═ */
.order-card, .cart-item, .ticket-card {
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.order-card:hover, .ticket-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
    border-color: var(--border-strong);
}
.order-status-badge {
    border-radius: 100px;
    font-weight: 700;
    letter-spacing: .02em;
}
.filter-tab {
    border-radius: 100px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.order-action-btn { border-radius: 100px; font-weight: 700; }
.menu-item { transition: background .15s ease; }
.menu-item:hover { background: var(--bg-elevated); }
.confirm-btn:not(:disabled):active { transform: scale(.99); }
/* ── Profil merchant publik (/m/:id) + rating & reviews ─────────────────────
   Prefix: mp-* (profil), mrv-* (reviews). Entry: tombol penyelenggara di
   event detail (ed-organizer) & chip penyelenggara kartu explore (exp-mkt-org). */

/* Page: kolom 480px konsisten dengan halaman lain (home/explore/detail).
   Hero full-bleed di dalam kolom → dibatasi 480 via .mp-page max-width. */
/* Kolom OPAQUE + terpusat ≤480px → grid global hanya tampak di gutter (spt /lives).
   border-inline = pembatas tegas antara lebar kolom & area di luar (gutter). */
.mp-page { min-height: 100vh; width: 100%; max-width: 480px; margin: 0 auto; background: var(--bg-page); border-inline: 1px solid var(--border-soft); position: relative; padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
.mp-container { padding: 0 16px; max-width: 480px; margin: 0 auto; }

/* Hero */
.mp-hero { position: relative; height: 200px; overflow: hidden; background: var(--bg-elevated); }
.mp-hero img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.mp-hero-grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, transparent 35%, var(--bg-page) 100%); }

/* Kepala profil */
.mp-head { margin: -46px auto 0; padding: 0 16px; position: relative; display: flex; align-items: flex-end; gap: 12px; }
.mp-avatar-wrap { position: relative; flex: none; }
.mp-avatar { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 3px solid var(--bg-page); background: var(--bg-elevated); display: block; }
.mp-avatar-fallback { display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 800; color: var(--text-on-accent); background: var(--accent-lime); }
/* Bingkai story pada avatar — identik dgn .ed-story-ring-circle di event detail
   (gradient lime→blue→violet). Muncul hanya bila merchant punya story aktif;
   .mp-avatar tetap punya border bg-page sebagai pemisah cincin↔logo. */
.mp-avatar-ring { display: block; padding: 3px; border: none; border-radius: 50%; background: linear-gradient(45deg, var(--accent-lime), var(--accent-blue), var(--accent-violet)); cursor: pointer; line-height: 0; -webkit-tap-highlight-color: transparent; }
.mp-avatar-badge { position: absolute; right: 2px; bottom: 4px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-lime); color: var(--text-on-accent); border: 3px solid var(--bg-page); display: flex; align-items: center; justify-content: center; }

.mp-head-actions { margin-left: auto; padding-bottom: 8px; display: flex; align-items: center; gap: 8px; position: relative; }
.mp-follow-btn { padding: 10px 26px; border-radius: 999px; border: 1px solid transparent; background: var(--accent-blue); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; transition: opacity .15s, background .15s; }
.mp-follow-btn:disabled { opacity: .6; }
.mp-follow-btn[data-on="true"] { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border); }
.mp-icon-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; transition: background .15s, border-color .15s; }
.mp-icon-btn:hover { background: var(--bg-elevated-2); border-color: var(--accent-lime); }
.mp-share-toast { position: absolute; top: calc(100% + 8px); right: 0; background: var(--text-primary); color: var(--bg-page); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 8px; white-space: nowrap; z-index: 5; box-shadow: 0 6px 18px rgba(0,0,0,.28); }

.mp-name-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.mp-name { font-size: 25px; font-weight: 800; margin: 0; letter-spacing: -.02em; line-height: 1.15; }
.mp-verified { color: var(--accent-lime); display: inline-flex; }
.mp-loc { display: flex; align-items: center; gap: 5px; margin: 6px 0 0; font-size: 13px; color: var(--text-muted); }
.mp-loc svg { color: var(--accent-lime); flex: none; }

/* Statistik */
.mp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0 6px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px; padding: 14px 6px; }
.mp-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: inherit; }
.mp-stat + .mp-stat { border-left: 1px solid var(--border); }
.mp-stat-num { font-size: 18px; font-weight: 800; }
.mp-stat-star { color: var(--accent-lime); margin-left: 2px; font-size: 14px; }
.mp-stat-label { font-size: 10px; letter-spacing: .12em; color: var(--text-muted); }
.mp-stat-link:hover .mp-stat-num { color: var(--accent-lime); }

/* Tabs */
/* space-evenly → jarak antar tab & ke tepi kolom sama rata. */
.mp-tabs { display: flex; justify-content: space-evenly; gap: 0; margin: 14px 0 12px; border-bottom: 1px solid var(--border); }
.mp-tab { background: none; border: none; padding: 8px 2px 10px; font-size: 12px; letter-spacing: .12em; font-weight: 700; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; text-decoration: none; }
.mp-tab--on { color: var(--text-primary); border-bottom-color: var(--accent-lime); }

/* Grid event + tentang */
.mp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.mp-about-text { color: var(--text-primary); line-height: 1.65; white-space: pre-line; }
.mp-empty { color: var(--text-muted); font-size: 14px; padding: 18px 0; }

/* ── Carousel geser EVENTS · TENTANG · ULASAN · STORY ───────────────────────
   Ke-4 panel selalu dirender. Panel AKTIF `position:relative` → dialah yang
   menentukan tinggi container (tab pendek tak menyisakan ruang kosong dari tab
   panjang); panel lain `position:absolute` (keluar flow) digeser ±100% via
   translateX(calc(N% + Dpx)) sehingga tetangga mengintip saat drag & commit-nya
   meluncur. `touch-action: pan-y` = scroll vertikal native, horizontal ditangani
   pointer handler (axis-lock). */
/* min-height = area swipe minimal: tanpa ini, tab berkonten pendek (mis. "Belum
   ada ulasan") menciutkan container ke tinggi konten → area kosong di bawahnya
   BUKAN bagian .mp-swipe sehingga pointerdown tak tertangkap (tak bisa digeser).
   Handler pointer hanya ada di .mp-swipe, jadi container harus selalu punya
   "strip" yang bisa ditarik. Konten tinggi tetap melebihi floor ini (tak dibatasi). */
.mp-swipe { position: relative; overflow: hidden; touch-action: pan-y; min-height: 340px; }
.mp-panel { position: absolute; top: 0; left: 0; width: 100%; will-change: transform; transition: transform .34s cubic-bezier(.32, .72, 0, 1); }
.mp-panel--active { position: relative; } /* hanya yang aktif menentukan tinggi */
.mp-panel--drag { transition: none; }     /* drag mengikuti jari (60fps) */

/* Panel ULASAN in-page (ringkas; form tulis ada di halaman /m/:id/reviews) */
.mp-reviews { padding-top: 4px; }
.mp-reviews-all { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--accent-lime); text-decoration: none; }
.mp-reviews-all:hover { text-decoration: underline; }

/* Muat lebih banyak (paginasi EVENTS) */
.mp-more-wrap { display: flex; justify-content: center; margin: 16px 0 4px; }
.mp-more-btn { padding: 10px 22px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-primary); font-size: 12px; letter-spacing: .1em; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s; }
.mp-more-btn:hover:not(:disabled) { border-color: var(--accent-lime); background: var(--bg-elevated-2); }
.mp-more-btn:disabled { opacity: .6; cursor: default; }

/* Panel STORY: grid thumbnail 3 kolom, tap → StoryViewer */
.mp-stories { padding-top: 8px; }
.mp-story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mp-story-cell { position: relative; aspect-ratio: 9 / 16; border: none; padding: 0; border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--bg-elevated); }
.mp-story-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-story-play { position: absolute; right: 6px; bottom: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; }

/* ── Reviews (/m/:id/reviews) ──────────────────────────────────────────────── */
.mrv-store { margin: 16px 0 6px; font-size: 12px; letter-spacing: .1em; color: var(--text-muted); text-transform: uppercase; }

.mrv-summary { margin-bottom: 22px; }
.mrv-big { display: flex; align-items: center; gap: 16px; }
.mrv-avg { font-size: 64px; font-weight: 900; color: var(--accent-lime); line-height: .9; letter-spacing: -.04em; }
.mrv-big-side { display: flex; flex-direction: column; gap: 4px; }
.mrv-big-side .mrv-stars { font-size: 20px; }
.mrv-outof { font-size: 13px; color: var(--text-muted); }
.mrv-total { margin: 8px 0 16px; color: var(--text-secondary, var(--text-muted)); font-size: 14px; font-weight: 600; }

.mrv-stars { display: inline-flex; gap: 2px; font-size: 16px; }
.mrv-star { color: var(--border); }
.mrv-star--on { color: var(--accent-lime); }

.mrv-dist { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 11px; }
.mrv-dist-row { display: flex; align-items: center; gap: 12px; }
.mrv-dist-star { width: 12px; text-align: right; font-size: 13px; font-weight: 700; color: var(--text-muted); }
.mrv-dist-bar { flex: 1; height: 9px; border-radius: 999px; background: var(--border); overflow: hidden; }
.mrv-dist-fill { height: 100%; border-radius: 999px; background: var(--accent-lime); transition: width .4s ease; }
.mrv-dist-cnt { width: 34px; text-align: right; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Daftar ulasan */
.mrv-list-head { margin: 6px 0 10px; }
.mrv-list { display: flex; flex-direction: column; gap: 10px; }
.mrv-item { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.mrv-item-head { display: flex; align-items: center; gap: 10px; }
.mrv-item-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-blue); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
.mrv-item-who { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.mrv-item-name { font-weight: 700; font-size: 14px; }
.mrv-item-date { font-size: 11px; color: var(--text-muted); }
.mrv-item-text { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-primary); }

/* Form ulasan */
.mrv-form { margin-top: 22px; }
.mrv-form-body { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.mrv-pick { display: flex; gap: 6px; }
.mrv-pick-star { background: none; border: none; font-size: 30px; line-height: 1; color: var(--border); cursor: pointer; padding: 2px; transition: transform .1s; }
.mrv-pick-star:active { transform: scale(1.2); }
.mrv-pick-star--on { color: var(--accent-lime); }
.mrv-form-msg { font-size: 13px; color: var(--text-muted); margin: 0; }

/* ── Profil publik user (/u/:id) ────────────────────────────────────────────── */
.up-head { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22px 16px 4px; }
.up-avatar { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 800; color: var(--text-on-accent); background: var(--accent-blue); border: 3px solid var(--accent-lime); }
.up-name { font-size: 24px; font-weight: 800; margin: 14px 0 0; letter-spacing: -.02em; }

/* Ulasan yang ditulis user = kartu yang bisa diklik ke /m/{merchant} */
.up-review-link { display: block; text-decoration: none; color: inherit; transition: border-color .15s, background .15s; }
.up-review-link:hover { border-color: var(--accent-lime); background: var(--bg-elevated-2); }

/* Avatar & nama penulis ulasan → tautan ke /u/{id} */
a.mrv-item-avatar { text-decoration: none; cursor: pointer; }
.mrv-item-who--link { text-decoration: none; color: inherit; cursor: pointer; }
.mrv-item-who--link:hover .mrv-item-name { color: var(--accent-lime); }

/* ── Daftar follower (/m/:id/followers) ─────────────────────────────────────── */
.mflw-count-badge { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--border); font-size: 13px; font-weight: 800; color: var(--accent-lime); }

.mflw-search { display: flex; align-items: center; gap: 10px; margin: 14px 0 16px; padding: 0 14px; height: 46px; border-radius: 14px; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-muted); }
.mflw-search:focus-within { border-color: var(--accent-lime); }
.mflw-search svg { flex: none; }
.mflw-search-input { flex: 1; background: none; border: none; outline: none; color: var(--text-primary); font-size: 15px; }
.mflw-search-input::placeholder { color: var(--text-muted); }

.mflw-list { display: flex; flex-direction: column; gap: 10px; }
.mflw-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--bg-elevated); border: 1px solid var(--border); text-decoration: none; color: inherit; }
.mflw-item--link { cursor: pointer; transition: border-color .15s, background .15s; }
.mflw-item--link:hover { border-color: var(--accent-lime); background: var(--bg-elevated-2); }
.mflw-avatar { width: 52px; height: 52px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: var(--text-on-accent); background: var(--accent-blue); }
.mflw-meta { display: flex; flex-direction: column; min-width: 0; margin-right: auto; gap: 3px; }
.mflw-name { font-weight: 700; font-size: 15px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mflw-sub { font-size: 12px; color: var(--text-muted); }
.mflw-tag { flex: none; font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--accent-lime); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; }

/* ── Entry point: penyelenggara di event detail & explore ──────────────────── */
.ed-organizer { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-elevated); text-decoration: none; color: inherit; }
.ed-organizer:hover { border-color: var(--accent-lime); }
.ed-org-icon { color: var(--accent-lime); display: inline-flex; flex: none; }
.ed-org-text { font-weight: 700; font-size: 14px; margin-right: auto; }
.ed-org-sub { display: block; font-weight: 400; font-size: 12px; color: var(--text-muted); }
.ed-org-arrow { color: var(--text-muted); }

.exp-mkt-org { display: inline-block; margin-top: 4px; font-size: 10px; letter-spacing: .1em; font-weight: 700; color: var(--accent-lime); cursor: pointer; }
.exp-mkt-org:hover { text-decoration: underline; }
/* ===== Bottom sheets event detail (tiket & info merchant) ====================
   Panel SELALU dirender (bukan conditional) supaya transisi CSS berjalan dua
   arah: backdrop fade + panel slide-up dengan easing spring-ish. Buka/tutup
   dikontrol class `edsheet--open` dari signal Leptos. */

.edsheet {
    position: fixed;
    inset: 0;
    z-index: 120;
    pointer-events: none; /* saat tertutup, jangan halangi halaman */
}
.edsheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.28s ease;
}
.edsheet-panel {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 0;
    
    /* WIDTH: 100% tapi di-clamp ke max-width page */
    width: 100%;
    max-width: 480px;      /* ← SAMA DENGAN .page */
    
    /* CLOSED: translateX(-50%) center + translateY(100%) hidden */
    transform: translateX(-50%) translateY(100%);
    
    /* Spring easing */
    transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
    /* Spring-ish: cepat di awal, mendarat halus — sama dengan easing swipe. */
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.edsheet--open { pointer-events: auto; }
.edsheet--open .edsheet-backdrop { opacity: 1; }
.edsheet--open .edsheet-panel {
    transform: translateX(-50%) translateY(0);
}

/* Grip bar ala native sheet. */
.edsheet-grip {
    width: 40px;
    height: 4px;
    border-radius: 100px;
    background: var(--border);
    margin: 10px auto 2px;
    flex: none;
}
.edsheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px 12px;
    border-bottom: 1px solid var(--border-soft);
    flex: none;
}
.edsheet-title {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.5px;
    color: var(--text-primary);
}
.edsheet-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.edsheet-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px 22px;
}

/* Isi sheet muncul dengan stagger halus saat sheet terbuka. */
.edsheet--open .edsheet-body > * {
    animation: edsheet-rise 0.42s cubic-bezier(0.32, 0.72, 0, 1) backwards;
}
.edsheet--open .edsheet-body > *:nth-child(2) { animation-delay: 0.05s; }
.edsheet--open .edsheet-body > *:nth-child(3) { animation-delay: 0.1s; }
.edsheet--open .edsheet-body > *:nth-child(4) { animation-delay: 0.15s; }
@keyframes edsheet-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Kartu penyelenggara (kini <button>, dulu <a>) ───────────────────────────
   Button TIDAK inherit font & shrink-to-fit → tanpa override ini teks merchant
   menyusut/terpotong dan kartu tak selebar konten lain. */
button.ed-organizer {
    width: 100%;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
/* Nama toko bisa panjang: clamp satu baris dengan ellipsis (sub tetap block). */
.ed-org-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Tombol pemicu "Pilih Tiket" di body halaman ─────────────────────────── */
.ed-tickets-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}
.ed-tickets-trigger:hover { border-color: var(--accent-lime); }
.ed-tickets-trigger-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-weight: 700;
    font-size: 15px;
}
.ed-tickets-trigger-sub {
    font-weight: 500;
    font-size: 12px;
    color: var(--text-secondary);
}
.ed-tickets-trigger-arrow { color: var(--text-secondary); flex: none; }

/* ── Kartu info merchant di dalam sheet ──────────────────────────────────── */
.edsheet-mch { display: flex; flex-direction: column; gap: 12px; }
.edsheet-mch-hero {
    height: 120px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-card);
}
.edsheet-mch-hero img { width: 100%; height: 100%; object-fit: cover; }
.edsheet-mch-head { display: flex; align-items: center; gap: 12px; }
.edsheet-mch-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    flex: none;
}
.edsheet-mch-avatar--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
    color: #fff;
    font-weight: 800;
    font-size: 20px;
}
.edsheet-mch-name {
    font-family: var(--font-display);
    font-size: 19px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.edsheet-mch-verified {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.edsheet-mch-stats {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--text-secondary);
}
.edsheet-mch-stats b { color: var(--text-primary); }
.edsheet-mch-desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.edsheet-mch-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 13px;
    border-radius: 100px;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-decoration: none;
    margin-top: 2px;
}
.edsheet-mch-loading {
    text-align: center;
    color: var(--text-secondary);
    padding: 28px 0;
}

/* Footer sheet (CTA keranjang) — menempel di dasar panel, di luar area scroll. */
.edsheet-foot {
    flex: none;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0));
    border-top: 1px solid var(--border-soft);
    background: var(--bg-elevated);
}
.edsheet-cta--disabled {
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* ── Lingkaran story penyelenggara di event detail (ala story-bar) ────────── */
.ed-story-ring {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 0;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: var(--text-primary);
}
.ed-story-ring-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(45deg, var(--accent-lime), var(--accent-blue), var(--accent-violet));
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.ed-story-ring-circle img,
.ed-story-ring-fallback {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--bg-page);
}
.ed-story-ring-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-violet));
    color: #fff;
    font-weight: 800;
    font-size: 20px;
}
.ed-story-ring-label { font-size: 13px; font-weight: 700; }

/* Tombol share ulasan → story (halaman /m/{id}/reviews) */
.mrv-share-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: none;
    margin-left: 8px;
}
.mrv-share-btn:hover { color: var(--accent-lime); border-color: var(--accent-lime); }
/* ===== Banner slider explore (tabel `banners`, admin-managed) ==============
   Track digeser via translateX dari signal (auto-advance 5 dtk + dots).
   Rasio dikunci agar tinggi stabil (tanpa CLS) apa pun ukuran gambar. */

.exp-bnr {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: var(--bg-elevated);
}
.exp-bnr-track {
    display: flex;
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}
.exp-bnr-slide {
    flex: 0 0 100%;
    display: block;
    aspect-ratio: 21 / 9;
}
.exp-bnr-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.exp-bnr-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    display: flex;
    justify-content: center;
    gap: 6px;
}
.exp-bnr-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}
.exp-bnr-dot--on {
    background: #fff;
    transform: scale(1.25);
}

/* ── Form banner di admin (tab Spanduk) ─────────────────────────────────── */
.admin-banner-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px dashed var(--border);
    border-radius: 14px;
    margin-bottom: 14px;
}
.admin-banner-form input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    font: inherit;
}
.admin-banner-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.admin-banner-btn {
    padding: 9px 16px;
    border-radius: 100px;
    border: none;
    background: var(--accent-lime);
    color: var(--text-on-accent);
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}
.admin-banner-btn--ghost {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
}
.admin-banner-btn--danger {
    background: transparent;
    color: #e5484d;
    border: 1px solid #e5484d55;
}
.admin-banner-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.admin-banner-msg { font-size: 12px; color: var(--text-secondary); }
/* ═══════════════════════════════════════════════════════════════════════
   TOAST — notifikasi UI global (checkout/order, pesan masuk, dll)
   Host fixed di atas-tengah, di dalam lebar kolom app (≤480px) agar sejajar
   dengan konten. Warna dari token → otomatis ikut tema terang/gelap.
   ═══════════════════════════════════════════════════════════════════════ */
.toast-host {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    width: 100%;
    max-width: 480px;
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none; /* host tembus klik; tiap toast aktifkan sendiri */
}

.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 12px 12px 14px;
    border-radius: 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-card);
    color: var(--text-primary);
    animation: toast-in 0.26s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.toast--link {
    cursor: pointer;
}
.toast--link:hover {
    border-color: var(--color-primary-border);
}

/* Ikon bulat, warna per jenis */
.toast-icon {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}
.toast--success .toast-icon {
    background: var(--accent-lime);
    color: var(--text-on-accent);
}
.toast--error .toast-icon {
    background: var(--danger);
    color: #fff;
}
.toast--info .toast-icon {
    background: transparent;
    font-size: 15px;
}

/* Aksen garis kiri sesuai jenis */
.toast--success {
    border-left: 3px solid var(--accent-lime);
}
.toast--error {
    border-left: 3px solid var(--danger);
}
.toast--info {
    border-left: 3px solid var(--accent-blue);
}

.toast-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 3px;
}
.toast-title {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.25;
    word-break: break-word;
}
.toast-body {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.35;
    word-break: break-word;
    /* Maks 2 baris agar toast tetap ringkas */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.toast-x {
    flex: none;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.toast-x:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}