/* SOCHOUSE — EVENT THEME: WELCOME WEEK · The Freshman Era (fase 1 College Youth; kerangka dari tema University) */
/* ============================================================
   SOCHOUSE — EVENT THEME: UNIVERSITY
   Auto-applied kalau EVENT_THEME=welcome_week di .env
   Scope: html[data-event="welcome_week"]
   Light variant: html[data-theme="light"][data-event="welcome_week"]
   ============================================================ */

/* ============================================================
   DARK MODE — BASE
   ============================================================ */
html[data-event="welcome_week"] {
    color-scheme: dark;
    background-color: #1a2440;

    /* ===== University palette ===== */
    --bg:             #1a2440;
    --bg-elevated:    #222e4e;
    --bg-hover:       rgba(228, 183, 63, 0.06);

    --border:         #34426b;
    --border-strong:  #4a5b8c;

    --text:           #f6f1e4;
    --text-muted:     #c4c2bb;
    --text-dim:       #949aa9;
    --text-faint:     #4d5c7a;

    --accent:         #e4b73f;
    --accent-hover:   #f3d27a;
    --accent-soft:    rgba(228, 183, 63, 0.14);

    --like:           #e0675a;
    --like-soft:      rgba(224, 103, 90, 0.12);

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

    --verified:       #e4b73f;
    --gold:           #f3d27a;
    --gold-soft:      rgba(245, 208, 97, 0.12);

    /* ===== University-specific tokens ===== */
    --uni-deep:     #1a2440;
    --uni-mid:      #222e4e;
    --uni-surface:  #e4b73f;
    --uni-foam:     #fff3cf;
    --uni-coral:    #e0675a;
    --uni-sand:     #f3d27a;
    --uni-glow:     rgba(228, 183, 63, 0.35);
}

/* ============================================================
   BACKGROUND — depth gradient (dark)
   ============================================================ */
html[data-event="welcome_week"] 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="welcome_week"] 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(26, 36, 64, 0.25) 0%,
            rgba(26, 36, 64, 0.38) 40%,
            rgba(26, 36, 64, 0.68) 100%),
        none;
    background-size: cover, cover;
    background-position: center center, center center;
    background-repeat: no-repeat, no-repeat;
}

/* ============================================================
   MASTHEAD / BOTTOM NAV
   ============================================================ */
html[data-event="welcome_week"] .masthead {
    background: rgba(30, 41, 70, 0.75);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    border-color: rgba(228, 183, 63, 0.14);
    box-shadow:
        0 0 0 1px rgba(228, 183, 63, 0.06),
        0 4px 20px rgba(0, 0, 0, 0.4),
        0 20px 60px rgba(228, 183, 63, 0.08);
}

html[data-event="welcome_week"] .bottom-nav {
    background: rgba(30, 41, 70, 0.92);
    border-top-color: rgba(228, 183, 63, 0.14);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
}

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

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

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

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

html[data-event="welcome_week"] .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="welcome_week"] .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="welcome_week"] .brand {
    font-size: 1.15rem;
    letter-spacing: 0.20em;
    color: #e4b73f !important;
    text-shadow:
        0 0 14px rgba(228, 183, 63, 0.55),
        0 0 28px rgba(228, 183, 63, 0.25);
    font-weight: 900;
    text-transform: uppercase;
}
html[data-event="welcome_week"] .brand:hover {
    color: #f3d27a !important;
}

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

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

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

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

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

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

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

/* ============================================================
   SCROLLBAR
   ============================================================ */
html[data-event="welcome_week"] ::-webkit-scrollbar-thumb {
    background: rgba(228, 183, 63, 0.20);
}
html[data-event="welcome_week"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(228, 183, 63, 0.35);
}


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

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

    /* ===== University light palette ===== */
    --bg:             #f8f3e6;
    --bg-elevated:    #ffffff;
    --bg-hover:       rgba(43, 58, 92, 0.06);

    --border:         #e6dcc4;
    --border-strong:  #cbbd9c;

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

    --accent:         #2b3a5c;
    --accent-hover:   #2b3a5c;
    --accent-soft:    rgba(43, 58, 92, 0.10);

    --like:           #c2493b;
    --like-soft:      rgba(194, 73, 59, 0.08);

    --verified:       #2b3a5c;
    --gold:           #b0861f;
    --gold-soft:      rgba(176, 134, 31, 0.12);

    --uni-deep:     #f8f3e6;
    --uni-mid:      #ffffff;
    --uni-surface:  #2b3a5c;
    --uni-foam:     #2b3a5c;
    --uni-coral:    #c2493b;
    --uni-sand:     #b0861f;
    --uni-glow:     rgba(43, 58, 92, 0.22);
}

/* ============================================================
   BACKGROUND — light (soft sky)
   ============================================================ */
html[data-theme="light"][data-event="welcome_week"] 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="welcome_week"] body:not(.dm-body):not(.is-dm-page):not(.is-admin-page)::before {
    background-image:
        linear-gradient(180deg,
            rgba(248, 243, 230, 0.70) 0%,
            rgba(248, 243, 230, 0.80) 40%,
            rgba(248, 243, 230, 0.92) 100%),
        none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

html[data-event="welcome_week"] .user-list {
    background: #222e4e !important;
    border-color: #34426b !important;
    position: relative;
    z-index: 5;
    isolation: isolate;
}

html[data-event="welcome_week"] .user-row {
    background: #222e4e !important;
    border-bottom-color: #34426b !important;
    position: relative;
    z-index: 1;
}

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

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

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

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

/* Notifications juga pakai list serupa */
html[data-event="welcome_week"] .notif-list {
    background: #222e4e !important;
    border-color: #34426b !important;
    position: relative;
    z-index: 5;
    isolation: isolate;
}

html[data-event="welcome_week"] .notif-item {
    background: #222e4e !important;
    border-bottom-color: #34426b !important;
}

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

html[data-event="welcome_week"] .notif-item-unread {
    background: rgba(228, 183, 63, 0.08) !important;
}

/* DM list juga kena pattern sama */
html[data-event="welcome_week"] .dm-list {
    background: #222e4e !important;
    border-color: #34426b !important;
    position: relative;
    z-index: 5;
    isolation: isolate;
}

html[data-event="welcome_week"] .dm-item {
    background: #222e4e !important;
    border-bottom-color: #34426b !important;
}

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

/* Light mode */
html[data-theme="light"][data-event="welcome_week"] .follows-header,
html[data-theme="light"][data-event="welcome_week"] .user-list,
html[data-theme="light"][data-event="welcome_week"] .user-row,
html[data-theme="light"][data-event="welcome_week"] .user-item,
html[data-theme="light"][data-event="welcome_week"] .notif-list,
html[data-theme="light"][data-event="welcome_week"] .notif-item,
html[data-theme="light"][data-event="welcome_week"] .dm-list,
html[data-theme="light"][data-event="welcome_week"] .dm-item {
    background: #ffffff !important;
    border-color: #e6dcc4 !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(243, 210, 122, .08) 10%, transparent 13%, transparent 55%, rgba(228, 183, 63, .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, #e4b73f);
    -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(243, 210, 122, .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(243, 210, 122, .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, #e4b73f); filter: drop-shadow(0 0 8px rgba(243, 210, 122, .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="welcome_week"] .schuni-bat { --c: #b0861f; }
html[data-theme="light"][data-event="welcome_week"] .schuni-float::before,
html[data-theme="light"][data-event="welcome_week"] .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="welcome_week"] .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="welcome_week"] .masthead .brand { position: relative; }
html[data-event="welcome_week"] .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="welcome_week"] .story-avatar.story-avatar-active {
    background: conic-gradient(from 210deg, #e4b73f, #fff3cf 25%, #e4b73f 50%, #a07a12 75%, #e4b73f) !important;
    animation: schuni-ringglow 3.2s ease-in-out infinite;
}
@keyframes schuni-ringglow { 0%, 100% { box-shadow: 0 0 0 0 rgba(228, 183, 63, 0); } 50% { box-shadow: 0 0 14px 2px rgba(243, 210, 122, .45); } }
/* nav aktif berdenyut; tombol utama bernapas */
html[data-event="welcome_week"] .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(228, 183, 63, .5); } 50% { box-shadow: 0 0 22px rgba(243, 210, 122, .95); } }
html[data-event="welcome_week"] .fab, html[data-event="welcome_week"] .compose-fab { animation: schuni-breathe 4s ease-in-out infinite; }
@keyframes schuni-breathe { 0%, 100% { box-shadow: 0 6px 22px rgba(228, 183, 63, .35), 0 0 0 1px rgba(243, 210, 122, .25) inset; } 50% { box-shadow: 0 10px 34px rgba(228, 183, 63, .6), 0 0 0 1px rgba(243, 210, 122, .5) inset; } }
/* kartu masuk bertahap saat halaman dibuka */
html[data-event="welcome_week"] .post-card { animation: schuni-in .7s cubic-bezier(.2, .8, .2, 1) both; }
html[data-event="welcome_week"] .post-card:nth-child(2) { animation-delay: .06s; } html[data-event="welcome_week"] .post-card:nth-child(3) { animation-delay: .12s; }
html[data-event="welcome_week"] .post-card:nth-child(4) { animation-delay: .18s; } html[data-event="welcome_week"] .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="welcome_week"] 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="welcome_week"] .masthead::after, html[data-event="welcome_week"] .masthead .brand::after,
    html[data-event="welcome_week"] .story-avatar.story-avatar-active, html[data-event="welcome_week"] .bottom-nav-item.is-active::after,
    html[data-event="welcome_week"] .fab, html[data-event="welcome_week"] .compose-fab, html[data-event="welcome_week"] .post-card { animation: none !important; }
}

/* ============================================================
   ORNAMEN UNIVERSITY — meander yunani & toga wisuda
   Di bawah masthead & di atas bottom nav. Dekoratif saja.
   ============================================================ */
html[data-event="welcome_week"] {
    --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="welcome_week"] .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="welcome_week"] .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="welcome_week"] .masthead::after,
html[data-theme="light"][data-event="welcome_week"] .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="welcome_week"] {
    --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="welcome_week"] 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, 103, 90, 0.26), transparent 70%),
        radial-gradient(45% 60% at 74% 100%, rgba(228, 183, 63, 0.20), transparent 70%),
        radial-gradient(70% 50% at 50% 110%, rgba(26, 36, 64, 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="welcome_week"] .masthead .brand {
    background: linear-gradient(90deg, #f3d27a 0%, #e4b73f 45%, #e0675a 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(228, 183, 63, 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(228, 183, 63, 0.35)); }
    50%      { background-position: 100% 50%; filter: drop-shadow(0 0 16px rgba(228, 183, 63, 0.7)); }
}
/* Nav aktif & tombol utama: glow emas */
html[data-event="welcome_week"] .bottom-nav-item.is-active { color: #f3d27a !important; }
html[data-event="welcome_week"] .bottom-nav-item.is-active::after { background: #e4b73f !important; box-shadow: 0 0 12px rgba(228, 183, 63, 0.8); }
html[data-event="welcome_week"] .btn-primary,
html[data-event="welcome_week"] .fab,
html[data-event="welcome_week"] .compose-fab {
    box-shadow: 0 6px 22px rgba(228, 183, 63, 0.35), 0 0 0 1px rgba(243, 210, 122, 0.25) inset;
}
/* Kartu & panel: kaca gelap dengan tepi ungu tipis */
html[data-event="welcome_week"] .post-card,
html[data-event="welcome_week"] .card,
html[data-event="welcome_week"] .panel {
    border-color: rgba(224, 103, 90, 0.14);
    box-shadow: 0 10px 30px rgba(5, 3, 9, 0.45);
}
/* Avatar story ring: oranye → ungu */
html[data-event="welcome_week"] .story-ring,
html[data-event="welcome_week"] .story-avatar.has-story::before {
    background: conic-gradient(from 180deg, #e4b73f, #e0675a, #f3d27a, #e4b73f) !important;
}

/* ============================================================
   UNIVERSITY — HALAMAN SHOP
   ============================================================ */
html[data-event="welcome_week"] .sh-hero {
    box-shadow: 0 0 0 1px rgba(228, 183, 63, 0.35), 0 18px 50px rgba(228, 183, 63, 0.18), 0 0 60px rgba(224, 103, 90, 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(228, 183, 63, 0.30), 0 14px 40px rgba(228, 183, 63, 0.14), 0 0 50px rgba(224, 103, 90, 0.10); }
    100% { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(228, 183, 63, 0.45), 0 22px 60px rgba(228, 183, 63, 0.24), 0 0 70px rgba(224, 103, 90, 0.16); }
}
html[data-event="welcome_week"] .sh-block-accent { background: linear-gradient(90deg, #e4b73f, #e0675a) !important; box-shadow: 0 0 10px rgba(228, 183, 63, 0.6); }
html[data-event="welcome_week"] .sh-block-title { color: #fff3cf; }
html[data-event="welcome_week"] .sh-card {
    background: rgba(30, 41, 70, 0.72) !important;
    border-color: rgba(228, 183, 63, 0.16) !important;
    transition: transform .28s cubic-bezier(.2, .8, .3, 1), box-shadow .28s ease, border-color .28s ease;
}
html[data-event="welcome_week"] .sh-card:hover,
html[data-event="welcome_week"] .sh-card:active {
    transform: translateY(-3px) scale(1.01);
    border-color: rgba(228, 183, 63, 0.5) !important;
    box-shadow: 0 14px 34px rgba(228, 183, 63, 0.22), 0 0 0 1px rgba(243, 210, 122, 0.2) inset;
}
html[data-event="welcome_week"] .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="welcome_week"] .sh-card.rarity-epic      { box-shadow: 0 0 0 1px rgba(224, 103, 90, 0.4), 0 0 24px rgba(224, 103, 90, 0.16); }
html[data-event="welcome_week"] .sh-card.rarity-rare      { box-shadow: 0 0 0 1px rgba(228, 183, 63, 0.28), 0 0 18px rgba(228, 183, 63, 0.10); }
html[data-event="welcome_week"] .sh-badge-owned { background: linear-gradient(135deg, #e4b73f, #e0675a) !important; color: #fff !important; }
/* Countdown: labu menyala, panel ungu */
html[data-event="welcome_week"] .sh-countdown {
    background: linear-gradient(135deg, rgba(31, 18, 48, 0.92) 0%, rgba(30, 41, 70, 0.92) 100%) !important;
    border: 1px solid rgba(228, 183, 63, 0.35) !important;
    box-shadow: 0 0 0 1px rgba(224, 103, 90, 0.12), 0 16px 40px rgba(5, 3, 9, 0.5), 0 0 40px rgba(228, 183, 63, 0.12);
}
html[data-event="welcome_week"] .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(228, 183, 63, 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(228, 183, 63, 0.6)); }
    50%      { transform: scale(1.08) rotate(3deg); filter: drop-shadow(0 0 12px rgba(243, 210, 122, 0.95)); }
}
html[data-event="welcome_week"] .sh-countdown-label { color: #f3d27a !important; }
html[data-event="welcome_week"] .sh-cd-num {
    color: #fff3cf !important;
    text-shadow: 0 0 14px rgba(228, 183, 63, 0.55);
    background: rgba(228, 183, 63, 0.10);
    border: 1px solid rgba(228, 183, 63, 0.22);
    border-radius: 10px;
}
html[data-event="welcome_week"] .sh-cd-lbl { color: #c4c2bb !important; }
html[data-event="welcome_week"] .sh-cd-sep { color: #e4b73f !important; animation: schuni-blink 1s steps(2, start) infinite; }
@keyframes schuni-blink { to { visibility: hidden; } }
html[data-event="welcome_week"] .sh-countdown.is-opening { border-color: rgba(224, 103, 90, 0.5) !important; }
html[data-event="welcome_week"] .sh-card-wrap.is-upcoming::after { background: linear-gradient(135deg, #e4b73f, #e0675a); box-shadow: 0 4px 12px rgba(228, 183, 63, 0.4); }
/* Mode terang: tetap hangat */
html[data-theme="light"][data-event="welcome_week"] .sh-card { background: rgba(255, 255, 255, 0.86) !important; }
html[data-theme="light"][data-event="welcome_week"] .sh-cd-num { color: #5a4408 !important; text-shadow: none; background: rgba(228, 183, 63, 0.08); }
html[data-theme="light"][data-event="welcome_week"] .sh-countdown-label { color: #2b3a5c !important; }
html[data-theme="light"][data-event="welcome_week"] .sh-countdown { background: linear-gradient(135deg, #fff3cf, #f8f3e6) !important; }
html[data-theme="light"][data-event="welcome_week"] .masthead .brand { filter: drop-shadow(0 0 6px rgba(228, 183, 63, 0.25)); }

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


/* ============================================================
   WELCOME WEEK — "Chalkboard Classroom Morning"
   Papan tulis hijau + coretan kapur, sinar matahari pagi dari jendela,
   bingkai/meja kayu, pesawat kertas, debu cahaya. Kartu = batu tulis gelap.
   ============================================================ */
html[data-event="welcome_week"] {
    background-color: #2c4537;
    --bg-elevated: rgba(20, 33, 26, 0.84);
    --bg-hover: rgba(255, 230, 170, 0.06);
    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.18);
    --text: #f4f1e6; --text-muted: #c9cfc4; --text-dim: #9eaa9f;
    --accent: #f2c95e; --accent-hover: #f7d98a; --accent-soft: rgba(242, 201, 94, 0.16);
    --like: #ef7f6b; --verified: #f2c95e; --gold: #f7d98a;
    --ww-doodle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='720' height='560' viewBox='0 0 720 560'><g fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' opacity='.5'><path d='M60 90 l8 18 20 2 -15 13 5 19 -18 -10 -18 10 5 -19 -15 -13 20 -2z'/><path d='M560 70 q40 -30 80 0 t80 0'/><path d='M250 470 c40 -20 80 -20 120 0 m-12 -14 l14 14 -16 8'/><circle cx='630' cy='420' r='26'/><ellipse cx='630' cy='420' rx='48' ry='16'/><ellipse cx='630' cy='420' rx='48' ry='16' transform='rotate(60 630 420)'/><ellipse cx='630' cy='420' rx='48' ry='16' transform='rotate(-60 630 420)'/><path d='M120 330 h70 m-35 -35 v70'/><path d='M440 200 l30 -30 30 30 m-30 -30 v70'/><path d='M80 500 q20 -40 40 0 q20 40 40 0'/><path d='M330 70 c-10 20 10 30 0 50'/></g><g fill='%23ffffff' opacity='.42' font-family='Chalkboard SE,Comic Sans MS,Marker Felt,cursive' font-size='30'><text x='240' y='110'>E = mc²</text><text x='420' y='330' font-size='26'>a² + b² = c²</text><text x='60' y='240' font-size='36'>Welcome, Maba!</text><text x='520' y='520' font-size='28'>GEN 01 ♥</text><text x='300' y='545' font-size='34'>%23day1</text><text x='590' y='160' font-size='22'>first day!!</text></g></svg>");
    --ww-wood: linear-gradient(180deg, rgba(255, 220, 170, .10), rgba(0, 0, 0, .12)),
               repeating-linear-gradient(92deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 9px, rgba(255, 255, 255, .04) 9px 10px, transparent 10px 23px),
               linear-gradient(90deg, #6a4128, #7c4e30 30%, #6e442a 60%, #7f5233);
    --uni-bat: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 28'><path d='M2 14 L46 2 L20 26 L18 17 Z' fill='%23000'/></svg>");
}
/* papan tulis: hijau dengan bekas hapusan kapur + coretan */
html[data-event="welcome_week"] body:not(.dm-body):not(.is-dm-page):not(.is-admin-page)::before {
    background-color: #2c4537;
    background-image:
        var(--ww-doodle),
        radial-gradient(38% 22% at 22% 30%, rgba(255, 255, 255, .07), transparent 70%),
        radial-gradient(30% 18% at 72% 62%, rgba(255, 255, 255, .06), transparent 70%),
        radial-gradient(45% 25% at 40% 85%, rgba(255, 255, 255, .05), transparent 70%),
        radial-gradient(120% 90% at 50% 50%, #33503f 0%, #2a4235 60%, #1f3328 100%);
    background-size: 720px 560px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    opacity: 1;
}
html[data-event="welcome_week"] body:not(.dm-body):not(.is-dm-page):not(.is-admin-page)::before { background-blend-mode: soft-light, normal, normal, normal, normal; }
/* sinar matahari pagi dari jendela kiri-atas */
html[data-event="welcome_week"] body:not(.dm-body):not(.is-dm-page):not(.is-admin-page)::after {
    left: 0; right: 0; top: 0; bottom: 0; height: auto; z-index: -1;
    background:
        radial-gradient(60% 50% at 0% 0%, rgba(255, 214, 140, .30), transparent 70%),
        linear-gradient(118deg, transparent 0 6%, rgba(255, 223, 160, .16) 9% 15%, transparent 19% 23%, rgba(255, 223, 160, .12) 26% 31%, transparent 35% 40%, rgba(255, 223, 160, .09) 43% 47%, transparent 52%);
    mix-blend-mode: screen; animation: ww-sun 14s ease-in-out infinite alternate;
}
@keyframes ww-sun { from { opacity: .75; } to { opacity: 1; } }
/* header & nav: kayu (bingkai papan & meja) */
html[data-event="welcome_week"] .masthead {
    background: var(--ww-wood); border: 1px solid rgba(40, 22, 10, .6);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 230, 190, .18);
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
html[data-event="welcome_week"] .bottom-nav {
    background: var(--ww-wood); border-top: 1px solid rgba(40, 22, 10, .6);
    box-shadow: 0 -8px 22px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 230, 190, .2);
}
/* baki kapur: batang kapur warna-warni di bawah header */
html[data-event="welcome_week"] .masthead::after {
    content: ''; position: absolute; left: 50%; bottom: -5px; width: 120px; height: 6px; margin-left: -60px; border-radius: 3px; opacity: 1;
    background: linear-gradient(90deg, #fffdf4 0 26px, transparent 26px 34px, #f2c95e 34px 56px, transparent 56px 64px, #ef9a8a 64px 84px, transparent 84px 92px, #9cc9e8 92px 120px);
    -webkit-mask: none; mask: none; pointer-events: none; box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
}
html[data-event="welcome_week"] .bottom-nav::before { content: none; }
@keyframes schuni-draw { from { opacity: 0; } to { opacity: 1; } }
html[data-event="welcome_week"] .masthead .brand {
    background: none; -webkit-background-clip: border-box; background-clip: border-box;
    color: #fff6e0 !important; text-shadow: 0 1px 0 rgba(60, 30, 10, .6); filter: none; animation: none; letter-spacing: .16em;
}
html[data-event="welcome_week"] .masthead a, html[data-event="welcome_week"] .masthead button { color: #fff6e0; }
html[data-event="welcome_week"] .bottom-nav-item { color: rgba(255, 240, 215, .72); }
html[data-event="welcome_week"] .bottom-nav-item.is-active { color: #ffe08f !important; }
html[data-event="welcome_week"] .bottom-nav-item.is-active::after { background: #ffe08f !important; box-shadow: 0 0 10px rgba(255, 224, 143, .7); }
html[data-event="welcome_week"] .btn-primary, html[data-event="welcome_week"] .fab, html[data-event="welcome_week"] .compose-fab { box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
/* kartu: batu tulis gelap; tab feed & label di atas papan */
html[data-event="welcome_week"] .post-card,
html[data-event="welcome_week"] .card,
html[data-event="welcome_week"] .panel {
    background: rgba(18, 30, 24, .86); border-color: rgba(255, 255, 255, .09);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .32);
}
html[data-event="welcome_week"] .feed-tabs {
    background: rgba(18, 30, 24, .7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08);
}
html[data-event="welcome_week"] .story-label { color: #f4f1e6; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
/* hiasan melayang: pesawat kertas meluncur, debu cahaya di sinar matahari, toga sesekali */
html[data-event="welcome_week"] .schuni-float::before,
html[data-event="welcome_week"] .schuni-float::after { display: none; }
html[data-event="welcome_week"] .schuni-bat {
    top: calc(4vh + var(--left) * .3); left: -70px; --c: #fbf8ef;
    width: calc(var(--size, 20px) * 1.3); height: calc(var(--size, 20px) * .76); opacity: 0;
    filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .3));
    animation-name: ww-plane; animation-duration: calc(var(--duration, 18s) * 1.4); animation-timing-function: ease-in-out;
}
html[data-event="welcome_week"] .schuni-bat:nth-child(n+5):not(.is-ghost):not(.is-cap) { display: none; }
@keyframes ww-plane {
    0%   { transform: translate(0, 0) rotate(8deg); opacity: 0; }
    6%   { opacity: .85; }
    35%  { transform: translate(38vw, 14vh) rotate(14deg); }
    60%  { transform: translate(66vw, 18vh) rotate(4deg); }
    94%  { opacity: .8; }
    100% { transform: translate(115vw, 34vh) rotate(18deg); opacity: 0; }
}
html[data-event="welcome_week"] .schuni-bat.is-ghost {
    top: auto; left: var(--left); width: var(--size, 6px); height: var(--size, 6px); filter: none;
    background: radial-gradient(circle, rgba(255, 246, 214, .95), rgba(255, 214, 140, .5) 45%, transparent 70%);
    animation-name: schuni-rise; animation-duration: calc(var(--duration, 18s) * 1.4); animation-timing-function: linear;
}
html[data-event="welcome_week"] .schuni-bat.is-cap { top: auto; left: var(--left); --c: #f2c95e; width: var(--size, 28px); height: var(--size, 28px); animation-name: schuni-toss; animation-duration: var(--duration, 12s); }
/* mode terang: dinding kelas krem disinari matahari, kartu kertas */
html[data-theme="light"][data-event="welcome_week"] body:not(.dm-body):not(.is-dm-page):not(.is-admin-page)::before {
    background-color: #f1e7d3;
    background-image: radial-gradient(70% 60% at 0% 0%, rgba(255, 214, 140, .45), transparent 70%), linear-gradient(180deg, #f6eedd, #ecdfc5);
    background-size: 100% 100%; background-blend-mode: normal;
}
html[data-theme="light"][data-event="welcome_week"] body:not(.dm-body):not(.is-dm-page):not(.is-admin-page)::after { mix-blend-mode: multiply; opacity: .5; }
html[data-theme="light"][data-event="welcome_week"] .post-card,
html[data-theme="light"][data-event="welcome_week"] .card,
html[data-theme="light"][data-event="welcome_week"] .panel { background: rgba(255, 253, 247, .92); border-color: #e3d4b6; box-shadow: 0 8px 20px rgba(120, 80, 40, .14); }
html[data-theme="light"][data-event="welcome_week"] .feed-tabs { background: rgba(255, 253, 247, .8); border-color: #e3d4b6; }
html[data-theme="light"][data-event="welcome_week"] .story-label { color: inherit; text-shadow: none; }
html[data-theme="light"][data-event="welcome_week"] .schuni-bat { --c: #ffffff; filter: drop-shadow(0 6px 6px rgba(120, 80, 40, .25)); }
@media (prefers-reduced-motion: reduce) {
    html[data-event="welcome_week"] body:not(.dm-body):not(.is-dm-page):not(.is-admin-page)::after { animation: none; }
}

/* ============================================================
   WELCOME WEEK — sticky note & kertas diremas di papan + #day1
   ============================================================ */
html[data-event="welcome_week"] {
    --ww-note-day1: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='210' height='200' viewBox='0 0 210 200'><g transform='rotate(-6 105.0 100.0) translate(20 20)'><path d='M4 8 L170 4 L168 146 Q140 160 110 162 L6 160 Z' fill='%23000000' opacity='.28' transform='translate(5 7)'/><path d='M4 8 L170 4 L168 146 Q140 160 110 162 L6 160 Z' fill='%23ffe066'/><path d='M110 162 Q130 142 168 146' fill='%23000' opacity='.08'/><g fill='%232b2418' font-family='Chalkboard SE,Comic Sans MS,Marker Felt,cursive' font-weight='700' font-size='30'><text x='85.0' y='58' text-anchor='middle'>%23day1</text><text x='85.0' y='92' text-anchor='middle'>first day</text><text x='85.0' y='126' text-anchor='middle'>of college!</text></g><circle cx='85.0' cy='14' r='9' fill='%23d64545'/><circle cx='82.0' cy='11' r='3' fill='%23ffffff' opacity='.6'/></g></svg>");
    --ww-note-pink: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='170' viewBox='0 0 200 170'><g transform='rotate(5 100.0 85.0) translate(20 20)'><path d='M4 8 L160 4 L158 116 Q130 130 100 132 L6 130 Z' fill='%23000000' opacity='.28' transform='translate(5 7)'/><path d='M4 8 L160 4 L158 116 Q130 130 100 132 L6 130 Z' fill='%23ffb3c7'/><path d='M100 132 Q120 112 158 116' fill='%23000' opacity='.08'/><g fill='%232b2418' font-family='Chalkboard SE,Comic Sans MS,Marker Felt,cursive' font-weight='700' font-size='30'><text x='80.0' y='58' text-anchor='middle'>Welcome</text><text x='80.0' y='92' text-anchor='middle'>Week ♥</text></g><circle cx='80.0' cy='14' r='9' fill='%232f6fd6'/><circle cx='77.0' cy='11' r='3' fill='%23ffffff' opacity='.6'/></g></svg>");
    --ww-note-blue: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='170' viewBox='0 0 200 170'><g transform='rotate(-3 100.0 85.0) translate(20 20)'><path d='M4 8 L160 4 L158 116 Q130 130 100 132 L6 130 Z' fill='%23000000' opacity='.28' transform='translate(5 7)'/><path d='M4 8 L160 4 L158 116 Q130 130 100 132 L6 130 Z' fill='%23a8dcff'/><path d='M100 132 Q120 112 158 116' fill='%23000' opacity='.08'/><g fill='%232b2418' font-family='Chalkboard SE,Comic Sans MS,Marker Felt,cursive' font-weight='700' font-size='30'><text x='80.0' y='58' text-anchor='middle'>jangan</text><text x='80.0' y='92' text-anchor='middle'>telat ya :)</text></g><circle cx='80.0' cy='14' r='9' fill='%23e2a400'/><circle cx='77.0' cy='11' r='3' fill='%23ffffff' opacity='.6'/></g></svg>");
    --ww-note-green: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='190' height='165' viewBox='0 0 190 165'><g transform='rotate(7 95.0 82.5) translate(20 20)'><path d='M4 8 L150 4 L148 111 Q120 125 90 127 L6 125 Z' fill='%23000000' opacity='.28' transform='translate(5 7)'/><path d='M4 8 L150 4 L148 111 Q120 125 90 127 L6 125 Z' fill='%23c8f0a4'/><path d='M90 127 Q110 107 148 111' fill='%23000' opacity='.08'/><g fill='%232b2418' font-family='Chalkboard SE,Comic Sans MS,Marker Felt,cursive' font-weight='700' font-size='30'><text x='75.0' y='58' text-anchor='middle'>GEN 01</text><text x='75.0' y='92' text-anchor='middle'>%23day1</text></g><circle cx='75.0' cy='14' r='9' fill='%23d64545'/><circle cx='72.0' cy='11' r='3' fill='%23ffffff' opacity='.6'/></g></svg>");
    --ww-crumple-1: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='110' viewBox='0 0 120 110'><g transform='rotate(10 60 55)'><ellipse cx='62' cy='98' rx='40' ry='7' fill='%23000' opacity='.25'/><path d='M22 52 L30 26 L52 14 L78 18 L96 34 L100 60 L88 84 L62 94 L36 88 L20 70 Z' fill='%23f7f3ea'/><g fill='none' stroke='%23b9b2a2' stroke-width='1.6' stroke-linejoin='round'><path d='M30 26 L46 44 L52 14 M46 44 L78 18 M46 44 L60 60 L96 34 M60 60 L100 60 M60 60 L62 94 M60 60 L36 88 M46 44 L22 52 L36 70 L20 70 M36 70 L60 60 M88 84 L74 70 L100 60'/></g><path d='M30 26 L52 14 L46 44 Z M60 60 L88 84 L74 70 Z' fill='%23e3dccd'/></g></svg>");
    --ww-crumple-2: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='110' viewBox='0 0 120 110'><g transform='rotate(-25 60 55)'><ellipse cx='62' cy='98' rx='40' ry='7' fill='%23000' opacity='.25'/><path d='M22 52 L30 26 L52 14 L78 18 L96 34 L100 60 L88 84 L62 94 L36 88 L20 70 Z' fill='%23f7f3ea'/><g fill='none' stroke='%23b9b2a2' stroke-width='1.6' stroke-linejoin='round'><path d='M30 26 L46 44 L52 14 M46 44 L78 18 M46 44 L60 60 L96 34 M60 60 L100 60 M60 60 L62 94 M60 60 L36 88 M46 44 L22 52 L36 70 L20 70 M36 70 L60 60 M88 84 L74 70 L100 60'/></g><path d='M30 26 L52 14 L46 44 Z M60 60 L88 84 L74 70 Z' fill='%23e3dccd'/></g></svg>");
    --ww-crumple-3: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='110' viewBox='0 0 120 110'><g transform='rotate(60 60 55)'><ellipse cx='62' cy='98' rx='40' ry='7' fill='%23000' opacity='.25'/><path d='M22 52 L30 26 L52 14 L78 18 L96 34 L100 60 L88 84 L62 94 L36 88 L20 70 Z' fill='%23f7f3ea'/><g fill='none' stroke='%23b9b2a2' stroke-width='1.6' stroke-linejoin='round'><path d='M30 26 L46 44 L52 14 M46 44 L78 18 M46 44 L60 60 L96 34 M60 60 L100 60 M60 60 L62 94 M60 60 L36 88 M46 44 L22 52 L36 70 L20 70 M36 70 L60 60 M88 84 L74 70 L100 60'/></g><path d='M30 26 L52 14 L46 44 Z M60 60 L88 84 L74 70 Z' fill='%23e3dccd'/></g></svg>");
}
/* lapisan papan: catatan & kertas di sisi kiri/kanan (area di luar kolom konten) */
html[data-event="welcome_week"] body:not(.dm-body):not(.is-dm-page):not(.is-admin-page) {
    background-image:
        var(--ww-note-day1), var(--ww-note-pink), var(--ww-note-blue), var(--ww-note-green),
        var(--ww-crumple-1), var(--ww-crumple-2), var(--ww-crumple-3) !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-position: 5% 16%, 94% 22%, 4% 66%, 93% 60%, 13% 92%, 86% 90%, 18% 44% !important;
    background-size: 210px auto, 200px auto, 200px auto, 190px auto, 110px auto, 96px auto, 84px auto !important;
}
html[data-event="welcome_week"] .ww-day1-tag { display: none; }
/* layar sempit: konten penuh, jadi catatan dikecilkan & sebagian disembunyikan agar tidak mengganggu */
@media (max-width: 1100px) {
    html[data-event="welcome_week"] body:not(.dm-body):not(.is-dm-page):not(.is-admin-page) {
        background-image: var(--ww-note-day1), var(--ww-crumple-1), var(--ww-note-pink) !important;
        background-position: 2% 13%, 96% 92%, 97% 40% !important;
        background-size: 130px auto, 74px auto, 120px auto !important;
    }
}
/* kilau brand bawaan tema University tidak dipakai (tampak sebagai kotak di atas kayu) */
html[data-event="welcome_week"] .masthead .brand::after { content: none !important; animation: none !important; }
/* HP: kolom konten penuh → sticky note disembunyikan supaya tidak menimpa story/kartu; cukup kertas remas kecil di pojok bawah */
@media (max-width: 760px) {
    html[data-event="welcome_week"] body:not(.dm-body):not(.is-dm-page):not(.is-admin-page) {
        background-image: var(--ww-crumple-1) !important;
        background-position: 104% 86% !important;
        background-size: 64px auto !important;
    }
}