/* SOCHOUSE — EVENT THEME: UNIVERSITY (navy Oxford + emas; diturunkan dari kerangka tema Shocktober) */
/* ============================================================
   SOCHOUSE — EVENT THEME: UNIVERSITY
   Auto-applied kalau EVENT_THEME=university di .env
   Scope: html[data-event="university"]
   Light variant: html[data-theme="light"][data-event="university"]
   ============================================================ */

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

    /* ===== University palette ===== */
    --bg:             #0b1220;
    --bg-elevated:    #121c30;
    --bg-hover:       rgba(212, 160, 23, 0.06);

    --border:         #1f2d4a;
    --border-strong:  #2e4169;

    --text:           #eef2f8;
    --text-muted:     #a9b7d0;
    --text-dim:       #7484a3;
    --text-faint:     #4d5c7a;

    --accent:         #d4a017;
    --accent-hover:   #f0c75e;
    --accent-soft:    rgba(212, 160, 23, 0.14);

    --like:           #e05a6a;
    --like-soft:      rgba(224, 90, 106, 0.12);

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

    --verified:       #d4a017;
    --gold:           #f5d061;
    --gold-soft:      rgba(245, 208, 97, 0.12);

    /* ===== University-specific tokens ===== */
    --uni-deep:     #0b1220;
    --uni-mid:      #121c30;
    --uni-surface:  #d4a017;
    --uni-foam:     #fff3cf;
    --uni-coral:    #e05a6a;
    --uni-sand:     #f5d061;
    --uni-glow:     rgba(212, 160, 23, 0.35);
}

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

/* ============================================================
   DASHBOARD BACKGROUND — bg-university.svg (fixed, mobile-safe)
   Body transparent, image + overlay via ::before
   ============================================================ */
html[data-event="university"] 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(11, 18, 32, 0.25) 0%,
            rgba(11, 18, 32, 0.38) 40%,
            rgba(11, 18, 32, 0.68) 100%),
        url('/assets/img/bg-university.svg');
    background-size: cover, cover;
    background-position: center center, center center;
    background-repeat: no-repeat, no-repeat;
}

/* ============================================================
   MASTHEAD / BOTTOM NAV
   ============================================================ */
html[data-event="university"] .masthead {
    background: rgba(18, 28, 48, 0.75);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    border-color: rgba(212, 160, 23, 0.14);
    box-shadow:
        0 0 0 1px rgba(212, 160, 23, 0.06),
        0 4px 20px rgba(0, 0, 0, 0.4),
        0 20px 60px rgba(212, 160, 23, 0.08);
}

html[data-event="university"] .bottom-nav {
    background: rgba(18, 28, 48, 0.92);
    border-top-color: rgba(212, 160, 23, 0.14);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
}

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

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

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

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

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

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

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

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

/* ============================================================
   BUTTONS
   ============================================================ */
html[data-event="university"] .button,
html[data-event="university"] .auth-submit,
html[data-event="university"] .btn-primary,
html[data-event="university"] .admin-btn {
    background: linear-gradient(135deg, #d4a017 0%, #b8860b 100%);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(212, 160, 23, 0.35);
}
html[data-event="university"] .button:hover,
html[data-event="university"] .auth-submit:hover,
html[data-event="university"] .btn-primary:hover,
html[data-event="university"] .admin-btn:hover {
    background: linear-gradient(135deg, #f0c75e 0%, #d4a017 100%);
    box-shadow: 0 6px 24px rgba(212, 160, 23, 0.5);
}
html[data-event="university"] .button-link {
    color: var(--accent);
}
html[data-event="university"] .button-link:hover {
    color: var(--accent-hover);
}

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

/* ============================================================
   STORY RING — gradien hutan
   ============================================================ */
html[data-event="university"] .story-avatar-active::before {
    background: linear-gradient(135deg,
        #d4a017 0%,
        #b8860b 25%,
        #fff3cf 50%,
        #d4a017 75%,
        #b8860b 100%);
    box-shadow: 0 0 12px rgba(212, 160, 23, 0.4);
}
html[data-event="university"] .story-avatar-add {
    background: rgba(212, 160, 23, 0.10);
    border-color: rgba(212, 160, 23, 0.35);
    color: var(--accent);
}

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

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

/* ============================================================
   SCROLLBAR
   ============================================================ */
html[data-event="university"] ::-webkit-scrollbar-thumb {
    background: rgba(212, 160, 23, 0.20);
}
html[data-event="university"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 160, 23, 0.35);
}


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

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

    /* ===== University light palette ===== */
    --bg:             #f6f3ec;
    --bg-elevated:    #ffffff;
    --bg-hover:       rgba(31, 58, 147, 0.06);

    --border:         #e3dccb;
    --border-strong:  #c7bca3;

    --text:           #1b2238;
    --text-muted:     #4f5a73;
    --text-dim:       #76819a;
    --text-faint:     #a3acbf;

    --accent:         #1f3a93;
    --accent-hover:   #1f3a93;
    --accent-soft:    rgba(31, 58, 147, 0.10);

    --like:           #b91c1c;
    --like-soft:      rgba(185, 28, 28, 0.08);

    --verified:       #1f3a93;
    --gold:           #a37a0a;
    --gold-soft:      rgba(163, 122, 10, 0.12);

    --uni-deep:     #f6f3ec;
    --uni-mid:      #ffffff;
    --uni-surface:  #1f3a93;
    --uni-foam:     #1f3a93;
    --uni-coral:    #b91c1c;
    --uni-sand:     #a37a0a;
    --uni-glow:     rgba(31, 58, 147, 0.22);
}

/* ============================================================
   BACKGROUND — light (soft sky)
   ============================================================ */
html[data-theme="light"][data-event="university"] 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="university"] 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-university.svg');
}

/* ============================================================
   MASTHEAD / BOTTOM NAV — light glass
   ============================================================ */
html[data-theme="light"][data-event="university"] .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(31, 58, 147, 0.14);
    box-shadow:
        0 0 0 1px rgba(31, 58, 147, 0.05),
        0 4px 20px rgba(26, 15, 40, 0.06),
        0 20px 60px rgba(31, 58, 147, 0.06);
}

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

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

html[data-theme="light"][data-event="university"] .bottom-nav-item-search .bottom-nav-icon {
    background: linear-gradient(135deg, #1f3a93 0%, #8a6a0d 100%);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow:
        0 0 0 2px rgba(31, 58, 147, 0.18),
        0 8px 24px rgba(31, 58, 147, 0.35),
        0 0 40px rgba(31, 58, 147, 0.20);
}
html[data-theme="light"][data-event="university"] .bottom-nav-item-search .bottom-nav-icon svg { stroke: #ffffff; }
html[data-theme="light"][data-event="university"] .bottom-nav-item-search.is-active .bottom-nav-icon {
    background: #ffffff;
    border-color: var(--accent);
}
html[data-theme="light"][data-event="university"] .bottom-nav-item-search.is-active .bottom-nav-icon svg { stroke: var(--accent); }

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

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

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

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

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

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

/* ============================================================
   BUTTONS — light
   ============================================================ */
html[data-theme="light"][data-event="university"] .button,
html[data-theme="light"][data-event="university"] .auth-submit,
html[data-theme="light"][data-event="university"] .btn-primary,
html[data-theme="light"][data-event="university"] .admin-btn {
    background: linear-gradient(135deg, #1f3a93 0%, #8a6a0d 100%);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(31, 58, 147, 0.28);
}
html[data-theme="light"][data-event="university"] .button:hover,
html[data-theme="light"][data-event="university"] .auth-submit:hover,
html[data-theme="light"][data-event="university"] .btn-primary:hover,
html[data-theme="light"][data-event="university"] .admin-btn:hover {
    background: linear-gradient(135deg, #1f3a93 0%, #1f3a93 100%);
    box-shadow: 0 6px 24px rgba(31, 58, 147, 0.40);
}

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

/* ============================================================
   FORMS / INPUTS — light
   ============================================================ */
html[data-theme="light"][data-event="university"] .field input,
html[data-theme="light"][data-event="university"] .field textarea,
html[data-theme="light"][data-event="university"] .input-select,
html[data-theme="light"][data-event="university"] .input-prefix {
    background: #ffffff;
    border-color: var(--border-strong);
    color: var(--text);
}
html[data-theme="light"][data-event="university"] .field input:focus,
html[data-theme="light"][data-event="university"] .field textarea:focus,
html[data-theme="light"][data-event="university"] .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="university"] .story-avatar-active::before {
    background: linear-gradient(135deg,
        #1f3a93 0%,
        #1f3a93 25%,
        #a3e635 50%,
        #1f3a93 75%,
        #8a6a0d 100%);
    box-shadow: 0 0 12px rgba(31, 58, 147, 0.30);
}
html[data-theme="light"][data-event="university"] .story-avatar-add {
    background: rgba(31, 58, 147, 0.08);
    border-color: rgba(31, 58, 147, 0.32);
    color: var(--accent);
}

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

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

/* ============================================================
   SCROLLBAR — light
   ============================================================ */
html[data-theme="light"][data-event="university"] ::-webkit-scrollbar-thumb {
    background: rgba(31, 58, 147, 0.20);
}
html[data-theme="light"][data-event="university"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(31, 58, 147, 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="university"] .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="university"] .user-list .user-row {
    background: transparent;
    border-bottom: 1px solid var(--border);
}

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

/* Light mode — solid putih biar konsisten */
html[data-theme="light"][data-event="university"] .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="university"] .search-results .user-list,
html[data-event="university"] .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="university"] .follows-header {
    background: #121c30 !important;
    border-bottom-color: #1f2d4a !important;
    position: relative;
    z-index: 5;
    isolation: isolate;
}

html[data-event="university"] .user-list {
    background: #121c30 !important;
    border-color: #1f2d4a !important;
    position: relative;
    z-index: 5;
    isolation: isolate;
}

html[data-event="university"] .user-row {
    background: #121c30 !important;
    border-bottom-color: #1f2d4a !important;
    position: relative;
    z-index: 1;
}

html[data-event="university"] .user-row:hover,
html[data-event="university"] .user-row:focus-within {
    background: #141d33 !important;
}

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

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

html[data-event="university"] .user-item-link:hover {
    background: #141d33 !important;
}

/* Notifications juga pakai list serupa */
html[data-event="university"] .notif-list {
    background: #121c30 !important;
    border-color: #1f2d4a !important;
    position: relative;
    z-index: 5;
    isolation: isolate;
}

html[data-event="university"] .notif-item {
    background: #121c30 !important;
    border-bottom-color: #1f2d4a !important;
}

html[data-event="university"] .notif-item:hover {
    background: #141d33 !important;
}

html[data-event="university"] .notif-item-unread {
    background: rgba(212, 160, 23, 0.08) !important;
}

/* DM list juga kena pattern sama */
html[data-event="university"] .dm-list {
    background: #121c30 !important;
    border-color: #1f2d4a !important;
    position: relative;
    z-index: 5;
    isolation: isolate;
}

html[data-event="university"] .dm-item {
    background: #121c30 !important;
    border-bottom-color: #1f2d4a !important;
}

html[data-event="university"] .dm-item:hover {
    background: #141d33 !important;
}

/* Light mode */
html[data-theme="light"][data-event="university"] .follows-header,
html[data-theme="light"][data-event="university"] .user-list,
html[data-theme="light"][data-event="university"] .user-row,
html[data-theme="light"][data-event="university"] .user-item,
html[data-theme="light"][data-event="university"] .notif-list,
html[data-theme="light"][data-event="university"] .notif-item,
html[data-theme="light"][data-event="university"] .dm-list,
html[data-theme="light"][data-event="university"] .dm-item {
    background: #ffffff !important;
    border-color: #e3dccb !important;
}
/* ============================================================
   UNIVERSITY — LAPIS "ANOTHER LEVEL": daun laurel emas berguguran,
   debu cahaya naik, toga dilempar, berkas cahaya aula, ring berputar,
   masthead "digambar", kartu masuk bertahap. Semua halus; mati saat
   prefers-reduced-motion.
   ============================================================ */
.schuni-float { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
/* berkas cahaya aula (dua sinar emas berputar sangat pelan) */
.schuni-float::before, .schuni-float::after {
    content: ''; position: absolute; left: 50%; top: -60vh; width: 140vmax; height: 140vmax; margin-left: -70vmax;
    background: conic-gradient(from 0deg, transparent 0 8%, rgba(240, 199, 94, .08) 10%, transparent 13%, transparent 55%, rgba(212, 160, 23, .06) 58%, transparent 62%);
    animation: schuni-beam 70s linear infinite; mix-blend-mode: screen;
}
.schuni-float::after { animation-duration: 110s; animation-direction: reverse; opacity: .7; }
@keyframes schuni-beam { to { transform: rotate(360deg); } }
/* daun laurel emas berguguran */
.schuni-bat {
    position: absolute; top: -40px; left: var(--left, 50%);
    width: var(--size, 22px); height: calc(var(--size, 22px) * .5);
    background: var(--c, #d4a017);
    -webkit-mask: var(--uni-bat) center / contain no-repeat; mask: var(--uni-bat) center / contain no-repeat;
    opacity: 0; animation: schuni-fall var(--duration, 18s) linear infinite; animation-delay: var(--delay, 0s);
    filter: drop-shadow(0 0 4px rgba(240, 199, 94, .35)); will-change: transform, opacity;
}
@keyframes schuni-fall {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    6%   { opacity: var(--opacity, .6); }
    25%  { transform: translate(var(--wave, 30px), 28vh) rotate(140deg); }
    50%  { transform: translate(calc(var(--wave, 30px) * -1), 56vh) rotate(260deg); }
    75%  { transform: translate(var(--wave, 30px), 84vh) rotate(400deg); }
    92%  { opacity: calc(var(--opacity, .6) * .6); }
    100% { transform: translate(0, 112vh) rotate(540deg); opacity: 0; }
}
/* debu cahaya emas naik dari lantai */
.schuni-bat.is-ghost {
    top: auto; bottom: -30px; height: var(--size, 10px);
    background: radial-gradient(circle, rgba(255, 243, 207, .95), rgba(240, 199, 94, .6) 45%, transparent 70%);
    -webkit-mask: none; mask: none; border-radius: 50%; filter: blur(.4px);
    animation-name: schuni-rise;
}
@keyframes schuni-rise {
    0%   { transform: translate(0, 0) scale(.6); opacity: 0; }
    15%  { opacity: var(--opacity, .5); }
    50%  { transform: translate(var(--drift, 20px), -55vh) scale(1); }
    85%  { opacity: calc(var(--opacity, .5) * .5); }
    100% { transform: translate(calc(var(--drift, 20px) * -1), -112vh) scale(.5); opacity: 0; }
}
/* toga dilempar ke udara (wisuda) */
.schuni-bat.is-cap {
    top: auto; bottom: -60px; height: var(--size, 34px);
    -webkit-mask: var(--uni-pumpkin) center / contain no-repeat; mask: var(--uni-pumpkin) center / contain no-repeat;
    background: var(--c, #d4a017); filter: drop-shadow(0 0 8px rgba(240, 199, 94, .5));
    animation-name: schuni-toss; animation-timing-function: cubic-bezier(.2, .8, .6, 1);
}
@keyframes schuni-toss {
    0%   { transform: translate(0, 0) rotate(-20deg) scale(.8); opacity: 0; }
    8%   { opacity: var(--opacity, .9); }
    40%  { transform: translate(var(--drift, 30px), -62vh) rotate(160deg) scale(1.05); }
    55%  { transform: translate(calc(var(--drift, 30px) * 1.2), -66vh) rotate(200deg) scale(1.05); }
    100% { transform: translate(calc(var(--drift, 30px) * 1.6), 10vh) rotate(380deg) scale(.9); opacity: 0; }
}
html[data-theme="light"][data-event="university"] .schuni-bat { --c: #a37a0a; }
html[data-theme="light"][data-event="university"] .schuni-float::before,
html[data-theme="light"][data-event="university"] .schuni-float::after { mix-blend-mode: multiply; opacity: .5; }
@media (max-width: 480px) { .schuni-bat:nth-child(n+13) { display: none; } }
/* masthead: garis meander "digambar" saat halaman dibuka; brand berkilau */
html[data-event="university"] .masthead::after { animation: schuni-draw 1.6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes schuni-draw { from { left: 50%; right: 50%; opacity: 0; } to { left: 22px; right: 22px; opacity: .45; } }
html[data-event="university"] .masthead .brand { position: relative; }
html[data-event="university"] .masthead .brand::after {
    content: ''; position: absolute; inset: -4px -10px; pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
    background-size: 250% 100%; mix-blend-mode: overlay; animation: schuni-sheen 7s ease-in-out infinite;
}
@keyframes schuni-sheen { 0%, 70% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
/* ring story: cincin emas statis dengan denyut cahaya (tanpa rotasi — rotasi bikin border Shop bergetar) */
html[data-event="university"] .story-avatar.story-avatar-active {
    background: conic-gradient(from 210deg, #d4a017, #fff3cf 25%, #d4a017 50%, #a07a12 75%, #d4a017) !important;
    animation: schuni-ringglow 3.2s ease-in-out infinite;
}
@keyframes schuni-ringglow { 0%, 100% { box-shadow: 0 0 0 0 rgba(212, 160, 23, 0); } 50% { box-shadow: 0 0 14px 2px rgba(240, 199, 94, .45); } }
/* nav aktif berdenyut; tombol utama bernapas */
html[data-event="university"] .bottom-nav-item.is-active::after { animation: schuni-pulse 2.6s ease-in-out infinite; }
@keyframes schuni-pulse { 0%, 100% { box-shadow: 0 0 10px rgba(212, 160, 23, .5); } 50% { box-shadow: 0 0 22px rgba(240, 199, 94, .95); } }
html[data-event="university"] .fab, html[data-event="university"] .compose-fab { animation: schuni-breathe 4s ease-in-out infinite; }
@keyframes schuni-breathe { 0%, 100% { box-shadow: 0 6px 22px rgba(212, 160, 23, .35), 0 0 0 1px rgba(240, 199, 94, .25) inset; } 50% { box-shadow: 0 10px 34px rgba(212, 160, 23, .6), 0 0 0 1px rgba(240, 199, 94, .5) inset; } }
/* kartu masuk bertahap saat halaman dibuka */
html[data-event="university"] .post-card { animation: schuni-in .7s cubic-bezier(.2, .8, .2, 1) both; }
html[data-event="university"] .post-card:nth-child(2) { animation-delay: .06s; } html[data-event="university"] .post-card:nth-child(3) { animation-delay: .12s; }
html[data-event="university"] .post-card:nth-child(4) { animation-delay: .18s; } html[data-event="university"] .post-card:nth-child(5) { animation-delay: .24s; }
@keyframes schuni-in { from { opacity: 0; transform: translateY(14px); } }
/* parallax latar mengikuti kursor / gerak halus (diatur JS lewat --px/--py) */
html[data-event="university"] body:not(.dm-body):not(.is-dm-page):not(.is-admin-page)::before {
    transform: translate(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 6px)) scale(1.04); transition: transform .6s ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .schuni-bat, .schuni-float::before, .schuni-float::after { display: none; }
    html[data-event="university"] .masthead::after, html[data-event="university"] .masthead .brand::after,
    html[data-event="university"] .story-avatar.story-avatar-active, html[data-event="university"] .bottom-nav-item.is-active::after,
    html[data-event="university"] .fab, html[data-event="university"] .compose-fab, html[data-event="university"] .post-card { animation: none !important; }
}

/* ============================================================
   ORNAMEN UNIVERSITY — meander yunani & toga wisuda
   Di bawah masthead & di atas bottom nav. Dekoratif saja.
   ============================================================ */
html[data-event="university"] {
    --uni-bat: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'><path d='M4 28C14 8 30 4 60 6 46 18 30 26 4 28z' fill='%23d4a017'/><path d='M8 26C20 16 36 10 56 8' fill='none' stroke='%23fff3cf' stroke-width='1.4'/></svg>");
    --uni-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 7h6V1h6v6h4V1h6v6h4V1h6' fill='none' stroke='%23d4a017' stroke-width='1.2'/></svg>");
}
html[data-event="university"] .masthead::after {
    content: ''; position: absolute; left: 22px; right: 22px; bottom: 3px; height: 8px;
    background: var(--uni-web) repeat-x center / 32px 8px; opacity: .45; pointer-events: none;
}
html[data-event="university"] .bottom-nav::before {
    content: ''; position: absolute; left: 0; right: 0; top: 2px; height: 8px;
    background: var(--uni-web) repeat-x center / 32px 8px; opacity: .35; pointer-events: none;
}
html[data-theme="light"][data-event="university"] .masthead::after,
html[data-theme="light"][data-event="university"] .bottom-nav::before { opacity: .6; filter: brightness(.8) saturate(1.3); }

/* ============================================================
   UNIVERSITY — LAPIS "WAH": kabut hidup, bara, bulan, glow
   Semua halus & pelan; dimatikan saat prefers-reduced-motion.
   ============================================================ */
html[data-event="university"] {
    --uni-pumpkin: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M32 14 6 26l26 12 26-12z' fill='%231b2238' stroke='%23d4a017' stroke-width='2.5' stroke-linejoin='round'/><path d='M16 31v10c0 4 8 8 16 8s16-4 16-8V31' fill='none' stroke='%23d4a017' stroke-width='2.5'/><path d='M52 27v12' stroke='%23f0c75e' stroke-width='2.5' stroke-linecap='round'/><circle cx='52' cy='42' r='3' fill='%23f0c75e'/></svg>");
}
/* Kabut navy-emas yang bergeser pelan di kaki layar */
html[data-event="university"] 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(224, 90, 106, 0.26), transparent 70%),
        radial-gradient(45% 60% at 74% 100%, rgba(212, 160, 23, 0.20), transparent 70%),
        radial-gradient(70% 50% at 50% 110%, rgba(11, 18, 32, 0.9), transparent 75%);
    animation: schuni-fog 28s ease-in-out infinite alternate;
}
@keyframes schuni-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: emas berkilau pelan */
html[data-event="university"] .masthead .brand {
    background: linear-gradient(90deg, #f0c75e 0%, #d4a017 45%, #e05a6a 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(212, 160, 23, 0.45));
    animation: schuni-ember 6s ease-in-out infinite;
}
@keyframes schuni-ember {
    0%, 100% { background-position: 0% 50%;   filter: drop-shadow(0 0 8px rgba(212, 160, 23, 0.35)); }
    50%      { background-position: 100% 50%; filter: drop-shadow(0 0 16px rgba(212, 160, 23, 0.7)); }
}
/* Nav aktif & tombol utama: glow emas */
html[data-event="university"] .bottom-nav-item.is-active { color: #f0c75e !important; }
html[data-event="university"] .bottom-nav-item.is-active::after { background: #d4a017 !important; box-shadow: 0 0 12px rgba(212, 160, 23, 0.8); }
html[data-event="university"] .btn-primary,
html[data-event="university"] .fab,
html[data-event="university"] .compose-fab {
    box-shadow: 0 6px 22px rgba(212, 160, 23, 0.35), 0 0 0 1px rgba(240, 199, 94, 0.25) inset;
}
/* Kartu & panel: kaca gelap dengan tepi ungu tipis */
html[data-event="university"] .post-card,
html[data-event="university"] .card,
html[data-event="university"] .panel {
    border-color: rgba(224, 90, 106, 0.14);
    box-shadow: 0 10px 30px rgba(5, 3, 9, 0.45);
}
/* Avatar story ring: oranye → ungu */
html[data-event="university"] .story-ring,
html[data-event="university"] .story-avatar.has-story::before {
    background: conic-gradient(from 180deg, #d4a017, #e05a6a, #f0c75e, #d4a017) !important;
}

/* ============================================================
   UNIVERSITY — HALAMAN SHOP
   ============================================================ */
html[data-event="university"] .sh-hero {
    box-shadow: 0 0 0 1px rgba(212, 160, 23, 0.35), 0 18px 50px rgba(212, 160, 23, 0.18), 0 0 60px rgba(224, 90, 106, 0.12);
    animation: schuni-hero 7s ease-in-out infinite alternate;
}
@keyframes schuni-hero {
    0%   { transform: translateY(0);    box-shadow: 0 0 0 1px rgba(212, 160, 23, 0.30), 0 14px 40px rgba(212, 160, 23, 0.14), 0 0 50px rgba(224, 90, 106, 0.10); }
    100% { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(212, 160, 23, 0.45), 0 22px 60px rgba(212, 160, 23, 0.24), 0 0 70px rgba(224, 90, 106, 0.16); }
}
html[data-event="university"] .sh-block-accent { background: linear-gradient(90deg, #d4a017, #e05a6a) !important; box-shadow: 0 0 10px rgba(212, 160, 23, 0.6); }
html[data-event="university"] .sh-block-title { color: #fff3cf; }
html[data-event="university"] .sh-card {
    background: rgba(18, 28, 48, 0.72) !important;
    border-color: rgba(212, 160, 23, 0.16) !important;
    transition: transform .28s cubic-bezier(.2, .8, .3, 1), box-shadow .28s ease, border-color .28s ease;
}
html[data-event="university"] .sh-card:hover,
html[data-event="university"] .sh-card:active {
    transform: translateY(-3px) scale(1.01);
    border-color: rgba(212, 160, 23, 0.5) !important;
    box-shadow: 0 14px 34px rgba(212, 160, 23, 0.22), 0 0 0 1px rgba(240, 199, 94, 0.2) inset;
}
html[data-event="university"] .sh-card.rarity-legendary { box-shadow: 0 0 0 1px rgba(245, 208, 97, 0.4), 0 0 26px rgba(245, 208, 97, 0.16); }
html[data-event="university"] .sh-card.rarity-epic      { box-shadow: 0 0 0 1px rgba(224, 90, 106, 0.4), 0 0 24px rgba(224, 90, 106, 0.16); }
html[data-event="university"] .sh-card.rarity-rare      { box-shadow: 0 0 0 1px rgba(212, 160, 23, 0.28), 0 0 18px rgba(212, 160, 23, 0.10); }
html[data-event="university"] .sh-badge-owned { background: linear-gradient(135deg, #d4a017, #e05a6a) !important; color: #fff !important; }
/* Countdown: labu menyala, panel ungu */
html[data-event="university"] .sh-countdown {
    background: linear-gradient(135deg, rgba(31, 18, 48, 0.92) 0%, rgba(18, 28, 48, 0.92) 100%) !important;
    border: 1px solid rgba(212, 160, 23, 0.35) !important;
    box-shadow: 0 0 0 1px rgba(224, 90, 106, 0.12), 0 16px 40px rgba(5, 3, 9, 0.5), 0 0 40px rgba(212, 160, 23, 0.12);
}
html[data-event="university"] .sh-countdown-flame {
    display: inline-block; font-size: 0 !important; width: 24px; height: 24px; vertical-align: middle;
    background: var(--uni-pumpkin) center / contain no-repeat;
    filter: drop-shadow(0 0 6px rgba(212, 160, 23, 0.8));
    animation: schuni-pumpkin 2.6s ease-in-out infinite;
}
@keyframes schuni-pumpkin {
    0%, 100% { transform: scale(1) rotate(-3deg);   filter: drop-shadow(0 0 5px rgba(212, 160, 23, 0.6)); }
    50%      { transform: scale(1.08) rotate(3deg); filter: drop-shadow(0 0 12px rgba(240, 199, 94, 0.95)); }
}
html[data-event="university"] .sh-countdown-label { color: #f0c75e !important; }
html[data-event="university"] .sh-cd-num {
    color: #fff3cf !important;
    text-shadow: 0 0 14px rgba(212, 160, 23, 0.55);
    background: rgba(212, 160, 23, 0.10);
    border: 1px solid rgba(212, 160, 23, 0.22);
    border-radius: 10px;
}
html[data-event="university"] .sh-cd-lbl { color: #a9b7d0 !important; }
html[data-event="university"] .sh-cd-sep { color: #d4a017 !important; animation: schuni-blink 1s steps(2, start) infinite; }
@keyframes schuni-blink { to { visibility: hidden; } }
html[data-event="university"] .sh-countdown.is-opening { border-color: rgba(224, 90, 106, 0.5) !important; }
html[data-event="university"] .sh-card-wrap.is-upcoming::after { background: linear-gradient(135deg, #d4a017, #e05a6a); box-shadow: 0 4px 12px rgba(212, 160, 23, 0.4); }
/* Mode terang: tetap hangat */
html[data-theme="light"][data-event="university"] .sh-card { background: rgba(255, 255, 255, 0.86) !important; }
html[data-theme="light"][data-event="university"] .sh-cd-num { color: #5a4408 !important; text-shadow: none; background: rgba(212, 160, 23, 0.08); }
html[data-theme="light"][data-event="university"] .sh-countdown-label { color: #1f3a93 !important; }
html[data-theme="light"][data-event="university"] .sh-countdown { background: linear-gradient(135deg, #fff3cf, #f6f3ec) !important; }
html[data-theme="light"][data-event="university"] .masthead .brand { filter: drop-shadow(0 0 6px rgba(212, 160, 23, 0.25)); }

@media (prefers-reduced-motion: reduce) {
    html[data-event="university"] body::after,
    html[data-event="university"] .masthead .brand,
    html[data-event="university"] .sh-hero,
    html[data-event="university"] .sh-countdown-flame,
    html[data-event="university"] .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; }