/* SOCHOUSE — EVENT THEME: SHOCKTOBER (file terpisah: hanya tema aktif yang dimuat) */
/* ============================================================
   SOCHOUSE — EVENT THEME: SHOCKTOBER
   Auto-applied kalau EVENT_THEME=shocktober di .env
   Scope: html[data-event="shocktober"]
   Light variant: html[data-theme="light"][data-event="shocktober"]
   ============================================================ */

/* ============================================================
   DARK MODE — BASE
   ============================================================ */
html[data-event="shocktober"] {
    color-scheme: dark;
    background-color: #0a0610;

    /* ===== Shocktober palette ===== */
    --bg:             #0a0610;
    --bg-elevated:    #160d1f;
    --bg-hover:       rgba(249, 115, 22, 0.06);

    --border:         #2e1a3f;
    --border-strong:  #44285c;

    --text:           #f3ecf7;
    --text-muted:     #b9a5c9;
    --text-dim:       #8a74a0;
    --text-faint:     #5e4a73;

    --accent:         #f97316;
    --accent-hover:   #fdba74;
    --accent-soft:    rgba(249, 115, 22, 0.14);

    --like:           #c084fc;
    --like-soft:      rgba(192, 132, 252, 0.12);

    --danger:         #ff5757;
    --danger-soft:    rgba(255, 87, 87, 0.10);

    --verified:       #f97316;
    --gold:           #facc15;
    --gold-soft:      rgba(250, 204, 21, 0.12);

    /* ===== Shocktober-specific tokens ===== */
    --shock-deep:     #0a0610;
    --shock-mid:      #160d1f;
    --shock-surface:  #f97316;
    --shock-foam:     #ffedd5;
    --shock-coral:    #c084fc;
    --shock-sand:     #facc15;
    --shock-glow:     rgba(249, 115, 22, 0.35);
}

/* ============================================================
   BACKGROUND — depth gradient (dark)
   ============================================================ */
html[data-event="shocktober"] body:not(.dm-body):not(.is-dm-page):not(.is-admin-page) {
    background: transparent !important;
    color: var(--text);
}

/* ============================================================
   DASHBOARD BACKGROUND — bg-shocktober.svg (fixed, mobile-safe)
   Body transparent, image + overlay via ::before
   ============================================================ */
html[data-event="shocktober"] body:not(.dm-body):not(.is-dm-page):not(.is-admin-page)::before {
    content: '';
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    pointer-events: none;
    background-image:
        linear-gradient(180deg,
            rgba(10, 6, 16, 0.25) 0%,
            rgba(10, 6, 16, 0.38) 40%,
            rgba(10, 6, 16, 0.68) 100%),
        url('/assets/img/bg-shocktober.svg');
    background-size: cover, cover;
    background-position: center center, center center;
    background-repeat: no-repeat, no-repeat;
}

/* ============================================================
   MASTHEAD / BOTTOM NAV
   ============================================================ */
html[data-event="shocktober"] .masthead {
    background: rgba(22, 13, 31, 0.75);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    border-color: rgba(249, 115, 22, 0.14);
    box-shadow:
        0 0 0 1px rgba(249, 115, 22, 0.06),
        0 4px 20px rgba(0, 0, 0, 0.4),
        0 20px 60px rgba(249, 115, 22, 0.08);
}

html[data-event="shocktober"] .bottom-nav {
    background: rgba(22, 13, 31, 0.92);
    border-top-color: rgba(249, 115, 22, 0.14);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
}

html[data-event="shocktober"] .bottom-nav-item {
    color: var(--text-dim);
}
html[data-event="shocktober"] .bottom-nav-item:hover,
html[data-event="shocktober"] .bottom-nav-item:focus-visible {
    color: var(--text-muted);
}
html[data-event="shocktober"] .bottom-nav-item.is-active {
    color: var(--accent);
}
html[data-event="shocktober"] .bottom-nav-item.is-active::after {
    background: var(--accent);
    box-shadow: 0 0 12px var(--shock-glow);
}

/* Search "island" — solid cyan */
html[data-event="shocktober"] .bottom-nav-item-search .bottom-nav-icon {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border-color: rgba(255, 237, 213, 0.5);
    box-shadow:
        0 0 0 2px rgba(249, 115, 22, 0.2),
        0 8px 28px rgba(249, 115, 22, 0.5),
        0 0 60px rgba(249, 115, 22, 0.3);
}
html[data-event="shocktober"] .bottom-nav-item-search .bottom-nav-icon svg { stroke: #ffffff; }
html[data-event="shocktober"] .bottom-nav-item-search.is-active .bottom-nav-icon {
    background: #0a0610;
}
html[data-event="shocktober"] .bottom-nav-item-search.is-active .bottom-nav-icon svg { stroke: var(--accent); }

/* ============================================================
   FAB
   ============================================================ */
html[data-event="shocktober"] .fab {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    box-shadow:
        0 8px 24px rgba(249, 115, 22, 0.5),
        0 2px 6px rgba(0, 0, 0, 0.2),
        0 0 40px rgba(249, 115, 22, 0.3);
}
html[data-event="shocktober"] .fab:hover {
    box-shadow:
        0 12px 32px rgba(249, 115, 22, 0.6),
        0 4px 10px rgba(0, 0, 0, 0.25),
        0 0 60px rgba(249, 115, 22, 0.4);
}

html[data-event="shocktober"] .fab-menu-item {
    background: var(--bg-elevated);
    border-color: rgba(249, 115, 22, 0.20);
    color: var(--text);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 24px rgba(249, 115, 22, 0.10);
}
html[data-event="shocktober"] .fab-menu-item:hover {
    border-color: var(--accent);
    background: rgba(249, 115, 22, 0.06);
}

html[data-event="shocktober"] .fab-rank {
    background: var(--bg-elevated);
    border-color: rgba(250, 204, 21, 0.35);
    color: var(--gold);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), 0 0 20px rgba(250, 204, 21, 0.10);
}
html[data-event="shocktober"] .fab-rank.is-active {
    background: var(--gold);
    color: var(--shock-deep);
    border-color: var(--gold);
    box-shadow: 0 6px 20px rgba(250, 204, 21, 0.4);
}

/* ============================================================
   BRAND — "SCH X KRHTL"
   ============================================================ */
html[data-event="shocktober"] .brand {
    font-size: 1.15rem;
    letter-spacing: 0.20em;
    color: #f97316 !important;
    text-shadow:
        0 0 14px rgba(249, 115, 22, 0.55),
        0 0 28px rgba(249, 115, 22, 0.25);
    font-weight: 900;
    text-transform: uppercase;
}
html[data-event="shocktober"] .brand:hover {
    color: #fdba74 !important;
}

@media (max-width: 420px) {
    html[data-event="shocktober"] .brand {
        font-size: 1.0rem;
        letter-spacing: 0.16em;
    }
}

/* ============================================================
   CARDS / PANELS
   ============================================================ */
html[data-event="shocktober"] .card,
html[data-event="shocktober"] .post-card,
html[data-event="shocktober"] .follows-header,
html[data-event="shocktober"] .bank-card,
html[data-event="shocktober"] .profile-user-card {
    background: linear-gradient(180deg, rgba(249, 115, 22, 0.025) 0%, var(--bg-elevated) 24%);
    border-color: var(--border);
}
html[data-event="shocktober"] .card {
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.25),
        0 0 40px rgba(249, 115, 22, 0.04);
}

/* ============================================================
   BUTTONS
   ============================================================ */
html[data-event="shocktober"] .button,
html[data-event="shocktober"] .auth-submit,
html[data-event="shocktober"] .btn-primary,
html[data-event="shocktober"] .admin-btn {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(249, 115, 22, 0.35);
}
html[data-event="shocktober"] .button:hover,
html[data-event="shocktober"] .auth-submit:hover,
html[data-event="shocktober"] .btn-primary:hover,
html[data-event="shocktober"] .admin-btn:hover {
    background: linear-gradient(135deg, #fdba74 0%, #f97316 100%);
    box-shadow: 0 6px 24px rgba(249, 115, 22, 0.5);
}
html[data-event="shocktober"] .button-link {
    color: var(--accent);
}
html[data-event="shocktober"] .button-link:hover {
    color: var(--accent-hover);
}

/* ============================================================
   FORMS / INPUTS
   ============================================================ */
html[data-event="shocktober"] .field input,
html[data-event="shocktober"] .field textarea,
html[data-event="shocktober"] .input-select,
html[data-event="shocktober"] .input-prefix {
    background: rgba(5, 3, 9, 0.7);
    border-color: var(--border-strong);
    color: var(--text);
}
html[data-event="shocktober"] .field input:focus,
html[data-event="shocktober"] .field textarea:focus,
html[data-event="shocktober"] .input-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ============================================================
   STORY RING — gradien hutan
   ============================================================ */
html[data-event="shocktober"] .story-avatar-active::before {
    background: linear-gradient(135deg,
        #f97316 0%,
        #ea580c 25%,
        #ffedd5 50%,
        #f97316 75%,
        #ea580c 100%);
    box-shadow: 0 0 12px rgba(249, 115, 22, 0.4);
}
html[data-event="shocktober"] .story-avatar-add {
    background: rgba(249, 115, 22, 0.10);
    border-color: rgba(249, 115, 22, 0.35);
    color: var(--accent);
}

/* ============================================================
   LIKE / REACTION — coral accent
   ============================================================ */
html[data-event="shocktober"] .post-action[data-liked="1"],
html[data-event="shocktober"] .comment-like-btn.is-liked {
    color: var(--shock-coral);
}

/* ============================================================
   VERIFIED BADGE
   ============================================================ */
html[data-event="shocktober"] .verified-badge svg path:first-child,
html[data-event="shocktober"] .verified-badge-img path:first-child {
    fill: var(--accent);
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
html[data-event="shocktober"] ::-webkit-scrollbar-thumb {
    background: rgba(249, 115, 22, 0.20);
}
html[data-event="shocktober"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(249, 115, 22, 0.35);
}


/* ============================================================
   ═══════════════════════════════════════════════════════════
   LIGHT MODE VARIANT
   ═══════════════════════════════════════════════════════════
   Tetap nuansa laut, versi cerah (soft sky blue)
   ============================================================ */

html[data-theme="light"][data-event="shocktober"] {
    color-scheme: light;
    background-color: #f7f0fa;

    /* ===== Shocktober light palette ===== */
    --bg:             #f7f0fa;
    --bg-elevated:    #ffffff;
    --bg-hover:       rgba(194, 65, 12, 0.06);

    --border:         #e3d4ec;
    --border-strong:  #c3b2d1;

    --text:           #1a0f28;
    --text-muted:     #5f4b74;
    --text-dim:       #83709a;
    --text-faint:     #a493b5;

    --accent:         #c2410c;
    --accent-hover:   #c2410c;
    --accent-soft:    rgba(194, 65, 12, 0.10);

    --like:           #9333ea;
    --like-soft:      rgba(147, 51, 234, 0.08);

    --verified:       #c2410c;
    --gold:           #c48a00;
    --gold-soft:      rgba(196, 138, 0, 0.12);

    --shock-deep:     #f7f0fa;
    --shock-mid:      #ffffff;
    --shock-surface:  #c2410c;
    --shock-foam:     #7e22ce;
    --shock-coral:    #9333ea;
    --shock-sand:     #c48a00;
    --shock-glow:     rgba(194, 65, 12, 0.22);
}

/* ============================================================
   BACKGROUND — light (soft sky)
   ============================================================ */
html[data-theme="light"][data-event="shocktober"] body:not(.dm-body):not(.is-dm-page):not(.is-admin-page) {
    background: transparent !important;
    color: var(--text);
}

/* Dashboard background image — light overlay */
html[data-theme="light"][data-event="shocktober"] body:not(.dm-body):not(.is-dm-page):not(.is-admin-page)::before {
    background-image:
        linear-gradient(180deg,
            rgba(247, 240, 250, 0.70) 0%,
            rgba(247, 240, 250, 0.80) 40%,
            rgba(247, 240, 250, 0.92) 100%),
        url('/assets/img/bg-shocktober.svg');
}

/* ============================================================
   MASTHEAD / BOTTOM NAV — light glass
   ============================================================ */
html[data-theme="light"][data-event="shocktober"] .masthead {
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    border-color: rgba(194, 65, 12, 0.14);
    box-shadow:
        0 0 0 1px rgba(194, 65, 12, 0.05),
        0 4px 20px rgba(26, 15, 40, 0.06),
        0 20px 60px rgba(194, 65, 12, 0.06);
}

html[data-theme="light"][data-event="shocktober"] .bottom-nav {
    background: rgba(255, 255, 255, 0.94);
    border-top-color: rgba(194, 65, 12, 0.14);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
}

html[data-theme="light"][data-event="shocktober"] .bottom-nav-item {
    color: var(--text-dim);
}
html[data-theme="light"][data-event="shocktober"] .bottom-nav-item:hover,
html[data-theme="light"][data-event="shocktober"] .bottom-nav-item:focus-visible {
    color: var(--text-muted);
}
html[data-theme="light"][data-event="shocktober"] .bottom-nav-item.is-active {
    color: var(--accent);
}
html[data-theme="light"][data-event="shocktober"] .bottom-nav-item.is-active::after {
    background: var(--accent);
    box-shadow: 0 0 12px var(--shock-glow);
}

html[data-theme="light"][data-event="shocktober"] .bottom-nav-item-search .bottom-nav-icon {
    background: linear-gradient(135deg, #c2410c 0%, #9a3412 100%);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow:
        0 0 0 2px rgba(194, 65, 12, 0.18),
        0 8px 24px rgba(194, 65, 12, 0.35),
        0 0 40px rgba(194, 65, 12, 0.20);
}
html[data-theme="light"][data-event="shocktober"] .bottom-nav-item-search .bottom-nav-icon svg { stroke: #ffffff; }
html[data-theme="light"][data-event="shocktober"] .bottom-nav-item-search.is-active .bottom-nav-icon {
    background: #ffffff;
    border-color: var(--accent);
}
html[data-theme="light"][data-event="shocktober"] .bottom-nav-item-search.is-active .bottom-nav-icon svg { stroke: var(--accent); }

/* ============================================================
   FAB — light
   ============================================================ */
html[data-theme="light"][data-event="shocktober"] .fab {
    background: linear-gradient(135deg, #c2410c 0%, #9a3412 100%);
    box-shadow:
        0 8px 24px rgba(194, 65, 12, 0.40),
        0 2px 6px rgba(26, 15, 40, 0.10),
        0 0 32px rgba(194, 65, 12, 0.20);
}
html[data-theme="light"][data-event="shocktober"] .fab:hover {
    box-shadow:
        0 12px 32px rgba(194, 65, 12, 0.50),
        0 4px 10px rgba(26, 15, 40, 0.12),
        0 0 48px rgba(194, 65, 12, 0.28);
}

html[data-theme="light"][data-event="shocktober"] .fab-menu-item {
    background: #ffffff;
    border-color: rgba(194, 65, 12, 0.18);
    color: var(--text);
    box-shadow: 0 6px 20px rgba(26, 15, 40, 0.08), 0 0 20px rgba(194, 65, 12, 0.06);
}
html[data-theme="light"][data-event="shocktober"] .fab-menu-item:hover {
    border-color: var(--accent);
    background: rgba(194, 65, 12, 0.05);
}

html[data-theme="light"][data-event="shocktober"] .fab-rank {
    background: #ffffff;
    border-color: rgba(196, 138, 0, 0.35);
    color: var(--gold);
    box-shadow: 0 4px 14px rgba(26, 15, 40, 0.08), 0 0 20px rgba(196, 138, 0, 0.10);
}
html[data-theme="light"][data-event="shocktober"] .fab-rank.is-active {
    background: var(--gold);
    color: #ffffff;
    border-color: var(--gold);
}

/* ============================================================
   BRAND — light mode
   ============================================================ */
html[data-theme="light"][data-event="shocktober"] .brand {
    font-size: 1.15rem;
    letter-spacing: 0.20em;
    color: #c2410c !important;
    text-shadow:
        0 0 14px rgba(194, 65, 12, 0.28),
        0 0 28px rgba(194, 65, 12, 0.12);
    font-weight: 900;
    text-transform: uppercase;
}
html[data-theme="light"][data-event="shocktober"] .brand:hover {
    color: #c2410c !important;
}

@media (max-width: 420px) {
    html[data-theme="light"][data-event="shocktober"] .brand {
        font-size: 1.0rem;
        letter-spacing: 0.16em;
    }
}

/* ============================================================
   CARDS / PANELS — light
   ============================================================ */
html[data-theme="light"][data-event="shocktober"] .card,
html[data-theme="light"][data-event="shocktober"] .post-card,
html[data-theme="light"][data-event="shocktober"] .follows-header,
html[data-theme="light"][data-event="shocktober"] .bank-card,
html[data-theme="light"][data-event="shocktober"] .profile-user-card {
    background: #ffffff;
    border-color: var(--border);
    box-shadow: 0 1px 2px rgba(26, 15, 40, 0.03), 0 0 40px rgba(194, 65, 12, 0.03);
}

/* ============================================================
   BUTTONS — light
   ============================================================ */
html[data-theme="light"][data-event="shocktober"] .button,
html[data-theme="light"][data-event="shocktober"] .auth-submit,
html[data-theme="light"][data-event="shocktober"] .btn-primary,
html[data-theme="light"][data-event="shocktober"] .admin-btn {
    background: linear-gradient(135deg, #c2410c 0%, #9a3412 100%);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(194, 65, 12, 0.28);
}
html[data-theme="light"][data-event="shocktober"] .button:hover,
html[data-theme="light"][data-event="shocktober"] .auth-submit:hover,
html[data-theme="light"][data-event="shocktober"] .btn-primary:hover,
html[data-theme="light"][data-event="shocktober"] .admin-btn:hover {
    background: linear-gradient(135deg, #c2410c 0%, #c2410c 100%);
    box-shadow: 0 6px 24px rgba(194, 65, 12, 0.40);
}

html[data-theme="light"][data-event="shocktober"] .button-link {
    color: var(--accent);
}
html[data-theme="light"][data-event="shocktober"] .button-link:hover {
    color: var(--accent-hover);
}

/* ============================================================
   FORMS / INPUTS — light
   ============================================================ */
html[data-theme="light"][data-event="shocktober"] .field input,
html[data-theme="light"][data-event="shocktober"] .field textarea,
html[data-theme="light"][data-event="shocktober"] .input-select,
html[data-theme="light"][data-event="shocktober"] .input-prefix {
    background: #ffffff;
    border-color: var(--border-strong);
    color: var(--text);
}
html[data-theme="light"][data-event="shocktober"] .field input:focus,
html[data-theme="light"][data-event="shocktober"] .field textarea:focus,
html[data-theme="light"][data-event="shocktober"] .input-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ============================================================
   STORY RING — light
   ============================================================ */
html[data-theme="light"][data-event="shocktober"] .story-avatar-active::before {
    background: linear-gradient(135deg,
        #c2410c 0%,
        #7e22ce 25%,
        #a3e635 50%,
        #c2410c 75%,
        #9a3412 100%);
    box-shadow: 0 0 12px rgba(194, 65, 12, 0.30);
}
html[data-theme="light"][data-event="shocktober"] .story-avatar-add {
    background: rgba(194, 65, 12, 0.08);
    border-color: rgba(194, 65, 12, 0.32);
    color: var(--accent);
}

/* ============================================================
   LIKE / REACTION — light
   ============================================================ */
html[data-theme="light"][data-event="shocktober"] .post-action[data-liked="1"],
html[data-theme="light"][data-event="shocktober"] .comment-like-btn.is-liked {
    color: var(--shock-coral);
}

/* ============================================================
   VERIFIED BADGE — light
   ============================================================ */
html[data-theme="light"][data-event="shocktober"] .verified-badge svg path:first-child,
html[data-theme="light"][data-event="shocktober"] .verified-badge-img path:first-child {
    fill: var(--accent);
}

/* ============================================================
   SCROLLBAR — light
   ============================================================ */
html[data-theme="light"][data-event="shocktober"] ::-webkit-scrollbar-thumb {
    background: rgba(194, 65, 12, 0.20);
}
html[data-theme="light"][data-event="shocktober"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(194, 65, 12, 0.35);
}
/* ============================================================
   LIST PAGES (followers / following / search / dll)
   Beri solid background biar hutan gak tembus ke list.
   Fix khusus: halaman list user yang sebelumnya transparan.
   ============================================================ */
html[data-event="shocktober"] .user-list {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 16px;
    margin: 12px 16px;
    padding: 6px 0;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

html[data-event="shocktober"] .user-list .user-row {
    background: transparent;
    border-bottom: 1px solid var(--border);
}

html[data-event="shocktober"] .user-list .user-row:last-child {
    border-bottom: none;
}

/* Light mode — solid putih biar konsisten */
html[data-theme="light"][data-event="shocktober"] .user-list {
    background: #ffffff;
    border-color: var(--border);
    box-shadow: 0 1px 2px rgba(26, 15, 40, 0.04);
}

/* Container list serupa yang juga transparan */
html[data-event="shocktober"] .search-results .user-list,
html[data-event="shocktober"] .search-section .user-list {
    /* inherits dari .user-list di atas, cukup pastikan margin */
    margin-left: 16px;
    margin-right: 16px;
}
/* ============================================================
   FIX: reef nutupin user-list di followers/following/search
   Force opaque bg + stacking context biar hutan gak tembus.
   ============================================================ */
html[data-event="shocktober"] .follows-header {
    background: #160d1f !important;
    border-bottom-color: #2e1a3f !important;
    position: relative;
    z-index: 5;
    isolation: isolate;
}

html[data-event="shocktober"] .user-list {
    background: #160d1f !important;
    border-color: #2e1a3f !important;
    position: relative;
    z-index: 5;
    isolation: isolate;
}

html[data-event="shocktober"] .user-row {
    background: #160d1f !important;
    border-bottom-color: #2e1a3f !important;
    position: relative;
    z-index: 1;
}

html[data-event="shocktober"] .user-row:hover,
html[data-event="shocktober"] .user-row:focus-within {
    background: #1f1230 !important;
}

html[data-event="shocktober"] .user-row-meta,
html[data-event="shocktober"] .user-row-action {
    position: relative;
    z-index: 1;
}

/* Halaman search juga pakai pattern list serupa */
html[data-event="shocktober"] .user-item {
    background: #160d1f !important;
    border-bottom-color: #2e1a3f !important;
    position: relative;
    z-index: 1;
}

html[data-event="shocktober"] .user-item-link:hover {
    background: #1f1230 !important;
}

/* Notifications juga pakai list serupa */
html[data-event="shocktober"] .notif-list {
    background: #160d1f !important;
    border-color: #2e1a3f !important;
    position: relative;
    z-index: 5;
    isolation: isolate;
}

html[data-event="shocktober"] .notif-item {
    background: #160d1f !important;
    border-bottom-color: #2e1a3f !important;
}

html[data-event="shocktober"] .notif-item:hover {
    background: #1f1230 !important;
}

html[data-event="shocktober"] .notif-item-unread {
    background: rgba(249, 115, 22, 0.08) !important;
}

/* DM list juga kena pattern sama */
html[data-event="shocktober"] .dm-list {
    background: #160d1f !important;
    border-color: #2e1a3f !important;
    position: relative;
    z-index: 5;
    isolation: isolate;
}

html[data-event="shocktober"] .dm-item {
    background: #160d1f !important;
    border-bottom-color: #2e1a3f !important;
}

html[data-event="shocktober"] .dm-item:hover {
    background: #1f1230 !important;
}

/* Light mode */
html[data-theme="light"][data-event="shocktober"] .follows-header,
html[data-theme="light"][data-event="shocktober"] .user-list,
html[data-theme="light"][data-event="shocktober"] .user-row,
html[data-theme="light"][data-event="shocktober"] .user-item,
html[data-theme="light"][data-event="shocktober"] .notif-list,
html[data-theme="light"][data-event="shocktober"] .notif-item,
html[data-theme="light"][data-event="shocktober"] .dm-list,
html[data-theme="light"][data-event="shocktober"] .dm-item {
    background: #ffffff !important;
    border-color: #e3d4ec !important;
}
/* ============================================================
   SHOCKTOBER — kelelawar & roh melayang pelan
   ============================================================ */
.schshock-float { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.schshock-bat {
    position: absolute; top: var(--top, 30%); left: -60px;
    width: var(--size, 22px); height: calc(var(--size, 22px) * .5);
    background: var(--c, #1a0f28);
    -webkit-mask: var(--shock-bat) center / contain no-repeat; mask: var(--shock-bat) center / contain no-repeat;
    opacity: 0; animation: schshock-fly var(--duration, 18s) linear infinite; animation-delay: var(--delay, 0s);
    will-change: transform, opacity;
}
.schshock-bat.is-ghost {
    left: var(--left, 50%); top: auto; bottom: -50px; height: calc(var(--size, 22px) * 1.2);
    background: radial-gradient(circle at 50% 35%, rgba(255, 237, 213, .9), rgba(192, 132, 252, .35) 60%, transparent 72%);
    -webkit-mask: none; mask: none; border-radius: 50% 50% 40% 40%; filter: blur(1px);
    animation-name: schshock-rise;
}
@keyframes schshock-fly {
    0%   { transform: translate(0, 0) scaleY(1); opacity: 0; }
    8%   { opacity: var(--opacity, .6); }
    25%  { transform: translate(28vw, var(--wave, -30px)) scaleY(.7); }
    50%  { transform: translate(56vw, 0) scaleY(1); }
    75%  { transform: translate(84vw, var(--wave, -30px)) scaleY(.7); }
    92%  { opacity: calc(var(--opacity, .6) * .7); }
    100% { transform: translate(calc(100vw + 120px), 0) scaleY(1); opacity: 0; }
}
@keyframes schshock-rise {
    0%   { transform: translate(0, 0); opacity: 0; }
    15%  { opacity: var(--opacity, .4); }
    50%  { transform: translate(var(--drift, 20px), -55vh); }
    85%  { opacity: calc(var(--opacity, .4) * .6); }
    100% { transform: translate(calc(var(--drift, 20px) * -1), -110vh); opacity: 0; }
}
html[data-theme="light"][data-event="shocktober"] .schshock-bat:not(.is-ghost) { --c: #3b1f52; }
@media (max-width: 480px) { .schshock-bat:nth-child(n+9) { display: none; } }
@media (prefers-reduced-motion: reduce) { .schshock-bat { display: none; } }

/* ============================================================
   ORNAMEN SHOCKTOBER — jaring laba-laba & labu tipis
   Di bawah masthead & di atas bottom nav. Dekoratif saja.
   ============================================================ */
html[data-event="shocktober"] {
    --shock-bat: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'><path d='M32 9c1.5-3 2.5-4 3-6 .5 2 0 3.5-.5 5 3-1 6 0 8 3 3-5 9-8 21-7-5 3-7 8-7 14-3-3-7-4-11-2-2-2-5-2-7 1-1 1-2 3-3 5-1-2-2-4-3-5-2-3-5-3-7-1-4-2-8-1-11 2 0-6-2-11-7-14 12-1 18 2 21 7 2-3 5-4 8-3-.5-1.5-1-3-.5-5 .5 2 1.5 3 3 6z'/></svg>");
    --shock-web: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='8' viewBox='0 0 32 8'><path d='M0 2q4 5 8 0t8 0 8 0 8 0' fill='none' stroke='%23f97316' stroke-width='1' stroke-linecap='round'/><circle cx='16' cy='5.2' r='1.3' fill='%23f97316'/></svg>");
}
html[data-event="shocktober"] .masthead::after {
    content: ''; position: absolute; left: 22px; right: 22px; bottom: 3px; height: 8px;
    background: var(--shock-web) repeat-x center / 32px 8px; opacity: .45; pointer-events: none;
}
html[data-event="shocktober"] .bottom-nav::before {
    content: ''; position: absolute; left: 0; right: 0; top: 2px; height: 8px;
    background: var(--shock-web) repeat-x center / 32px 8px; opacity: .35; pointer-events: none;
}
html[data-theme="light"][data-event="shocktober"] .masthead::after,
html[data-theme="light"][data-event="shocktober"] .bottom-nav::before { opacity: .6; filter: brightness(.8) saturate(1.3); }

/* ============================================================
   SHOCKTOBER — LAPIS "WAH": kabut hidup, bara, bulan, glow
   Semua halus & pelan; dimatikan saat prefers-reduced-motion.
   ============================================================ */
html[data-event="shocktober"] {
    --shock-pumpkin: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M30 9c3-5 8-6 12-4-3 1-6 4-6 8h-6z' fill='%2365a30d'/><ellipse cx='32' cy='38' rx='26' ry='21' fill='%23ea580c'/><ellipse cx='20' cy='38' rx='10' ry='21' fill='%23f97316' opacity='.7'/><ellipse cx='44' cy='38' rx='10' ry='21' fill='%23f97316' opacity='.7'/><path d='M18 32l6-8 6 8zM34 32l6-8 6 8zM14 44q18 14 36 0l-5 7-5-4-8 5-8-5-5 4z' fill='%23fde68a'/></svg>");
}
/* Kabut ungu-oranye yang bergeser pelan di kaki layar */
html[data-event="shocktober"] body:not(.dm-body):not(.is-dm-page):not(.is-admin-page)::after {
    content: '';
    position: fixed;
    left: -25%; right: -25%; bottom: -6vh;
    height: 42vh;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(55% 70% at 28% 100%, rgba(192, 132, 252, 0.26), transparent 70%),
        radial-gradient(45% 60% at 74% 100%, rgba(249, 115, 22, 0.20), transparent 70%),
        radial-gradient(70% 50% at 50% 110%, rgba(10, 6, 16, 0.9), transparent 75%);
    animation: schshock-fog 28s ease-in-out infinite alternate;
}
@keyframes schshock-fog {
    0%   { transform: translateX(-3%) translateY(0); opacity: .85; }
    50%  { transform: translateX(2%) translateY(-1.5vh); opacity: 1; }
    100% { transform: translateX(4%) translateY(0); opacity: .9; }
}
/* Brand: bara oranye berdenyut pelan */
html[data-event="shocktober"] .masthead .brand {
    background: linear-gradient(90deg, #fdba74 0%, #f97316 45%, #c084fc 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent !important;
    letter-spacing: .14em;
    text-shadow: none;
    filter: drop-shadow(0 0 10px rgba(249, 115, 22, 0.45));
    animation: schshock-ember 6s ease-in-out infinite;
}
@keyframes schshock-ember {
    0%, 100% { background-position: 0% 50%;   filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.35)); }
    50%      { background-position: 100% 50%; filter: drop-shadow(0 0 16px rgba(249, 115, 22, 0.7)); }
}
/* Nav aktif & tombol utama: glow labu */
html[data-event="shocktober"] .bottom-nav-item.is-active { color: #fdba74 !important; }
html[data-event="shocktober"] .bottom-nav-item.is-active::after { background: #f97316 !important; box-shadow: 0 0 12px rgba(249, 115, 22, 0.8); }
html[data-event="shocktober"] .btn-primary,
html[data-event="shocktober"] .fab,
html[data-event="shocktober"] .compose-fab {
    box-shadow: 0 6px 22px rgba(249, 115, 22, 0.35), 0 0 0 1px rgba(253, 186, 116, 0.25) inset;
}
/* Kartu & panel: kaca gelap dengan tepi ungu tipis */
html[data-event="shocktober"] .post-card,
html[data-event="shocktober"] .card,
html[data-event="shocktober"] .panel {
    border-color: rgba(192, 132, 252, 0.14);
    box-shadow: 0 10px 30px rgba(5, 3, 9, 0.45);
}
/* Avatar story ring: oranye → ungu */
html[data-event="shocktober"] .story-ring,
html[data-event="shocktober"] .story-avatar.has-story::before {
    background: conic-gradient(from 180deg, #f97316, #c084fc, #fdba74, #f97316) !important;
}

/* ============================================================
   SHOCKTOBER — HALAMAN SHOP
   ============================================================ */
html[data-event="shocktober"] .sh-hero {
    box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.35), 0 18px 50px rgba(249, 115, 22, 0.18), 0 0 60px rgba(192, 132, 252, 0.12);
    animation: schshock-hero 7s ease-in-out infinite alternate;
}
@keyframes schshock-hero {
    0%   { transform: translateY(0);    box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.30), 0 14px 40px rgba(249, 115, 22, 0.14), 0 0 50px rgba(192, 132, 252, 0.10); }
    100% { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.45), 0 22px 60px rgba(249, 115, 22, 0.24), 0 0 70px rgba(192, 132, 252, 0.16); }
}
html[data-event="shocktober"] .sh-block-accent { background: linear-gradient(90deg, #f97316, #c084fc) !important; box-shadow: 0 0 10px rgba(249, 115, 22, 0.6); }
html[data-event="shocktober"] .sh-block-title { color: #ffedd5; }
html[data-event="shocktober"] .sh-card {
    background: rgba(22, 13, 31, 0.72) !important;
    border-color: rgba(249, 115, 22, 0.16) !important;
    transition: transform .28s cubic-bezier(.2, .8, .3, 1), box-shadow .28s ease, border-color .28s ease;
}
html[data-event="shocktober"] .sh-card:hover,
html[data-event="shocktober"] .sh-card:active {
    transform: translateY(-3px) scale(1.01);
    border-color: rgba(249, 115, 22, 0.5) !important;
    box-shadow: 0 14px 34px rgba(249, 115, 22, 0.22), 0 0 0 1px rgba(253, 186, 116, 0.2) inset;
}
html[data-event="shocktober"] .sh-card.rarity-legendary { box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.4), 0 0 26px rgba(250, 204, 21, 0.16); }
html[data-event="shocktober"] .sh-card.rarity-epic      { box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.4), 0 0 24px rgba(192, 132, 252, 0.16); }
html[data-event="shocktober"] .sh-card.rarity-rare      { box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.28), 0 0 18px rgba(249, 115, 22, 0.10); }
html[data-event="shocktober"] .sh-badge-owned { background: linear-gradient(135deg, #f97316, #c084fc) !important; color: #fff !important; }
/* Countdown: labu menyala, panel ungu */
html[data-event="shocktober"] .sh-countdown {
    background: linear-gradient(135deg, rgba(31, 18, 48, 0.92) 0%, rgba(22, 13, 31, 0.92) 100%) !important;
    border: 1px solid rgba(249, 115, 22, 0.35) !important;
    box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.12), 0 16px 40px rgba(5, 3, 9, 0.5), 0 0 40px rgba(249, 115, 22, 0.12);
}
html[data-event="shocktober"] .sh-countdown-flame {
    display: inline-block; font-size: 0 !important; width: 24px; height: 24px; vertical-align: middle;
    background: var(--shock-pumpkin) center / contain no-repeat;
    filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.8));
    animation: schshock-pumpkin 2.6s ease-in-out infinite;
}
@keyframes schshock-pumpkin {
    0%, 100% { transform: scale(1) rotate(-3deg);   filter: drop-shadow(0 0 5px rgba(249, 115, 22, 0.6)); }
    50%      { transform: scale(1.08) rotate(3deg); filter: drop-shadow(0 0 12px rgba(253, 186, 116, 0.95)); }
}
html[data-event="shocktober"] .sh-countdown-label { color: #fdba74 !important; }
html[data-event="shocktober"] .sh-cd-num {
    color: #fff7ed !important;
    text-shadow: 0 0 14px rgba(249, 115, 22, 0.55);
    background: rgba(249, 115, 22, 0.10);
    border: 1px solid rgba(249, 115, 22, 0.22);
    border-radius: 10px;
}
html[data-event="shocktober"] .sh-cd-lbl { color: #b9a5c9 !important; }
html[data-event="shocktober"] .sh-cd-sep { color: #f97316 !important; animation: schshock-blink 1s steps(2, start) infinite; }
@keyframes schshock-blink { to { visibility: hidden; } }
html[data-event="shocktober"] .sh-countdown.is-opening { border-color: rgba(192, 132, 252, 0.5) !important; }
html[data-event="shocktober"] .sh-card-wrap.is-upcoming::after { background: linear-gradient(135deg, #f97316, #c084fc); box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4); }
/* Mode terang: tetap hangat */
html[data-theme="light"][data-event="shocktober"] .sh-card { background: rgba(255, 255, 255, 0.86) !important; }
html[data-theme="light"][data-event="shocktober"] .sh-cd-num { color: #7c2d12 !important; text-shadow: none; background: rgba(249, 115, 22, 0.08); }
html[data-theme="light"][data-event="shocktober"] .sh-countdown-label { color: #c2410c !important; }
html[data-theme="light"][data-event="shocktober"] .sh-countdown { background: linear-gradient(135deg, #fff7ed, #faf5ff) !important; }
html[data-theme="light"][data-event="shocktober"] .masthead .brand { filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.25)); }

@media (prefers-reduced-motion: reduce) {
    html[data-event="shocktober"] body::after,
    html[data-event="shocktober"] .masthead .brand,
    html[data-event="shocktober"] .sh-hero,
    html[data-event="shocktober"] .sh-countdown-flame,
    html[data-event="shocktober"] .sh-cd-sep { animation: none !important; }
}

/* ⚡ PERF: kartu feed di luar layar tidak di-layout/paint sampai mendekat (scroll lebih mulus di HP) */
.post-card { content-visibility: auto; contain-intrinsic-size: auto 520px; }