:root {
                /* Primary – Refined Amber */
                --amber: #d4a349;
                --amber2: #dfb35c;
                --amber3: #e8c66e;
                --amber4: #f0d885;
                --amber5: #f7ebaf;
                /* Accent – Muted Aqua */
                --aqua: #6eaa9e;
                --aqua2: #81beb3;
                --aqua3: #95cfc4;
                --aqua4: #b3dfd5;
                /* Dark theme: teal/blue from hero is PRIMARY, gold is secondary */
                --blue: var(--aqua);
                --blue2: var(--aqua2);
                --blue3: var(--aqua3);
                --blue4: var(--aqua4);
                --blue5: var(--aqua4);
                --orange: var(--amber);
                --orange2: var(--amber2);
                --orange3: var(--amber3);
                --orange4: var(--amber4);
                --mint: var(--aqua3);
                --mint2: var(--aqua4);
                /* Neutrals */
                --red: #d64545;
                /* Dark BG – Deep Forest */
                --bg: #0e1713;
                --bg2: #0e1713;
                --bg3: #0f172e;
                --card: #121d36;
                --card2: #182440;
                --brd: #1f2d50;
                --brd2: #2c3e66;
                --txt: #e4eaf6;
                --txt2: #7a8bb5;
                --txt3: #4a5a80;
                /* Shadows */
                --sh: 0 8px 32px rgba(0, 0, 0, 0.6);
                --sh2: 0 2px 8px rgba(0, 0, 0, 0.4);
                --r: 10px;
                --r2: 14px;
                --trans: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
                --olive: var(--aqua);
                --olive2: var(--aqua2);
                --olive3: var(--aqua3);
                --olive4: var(--aqua4);
                --sky: var(--aqua);
                --sky2: var(--aqua2);
                --sky3: var(--aqua3);
                --navy: #070c18;
                --navy2: #0b1223;
                --navy3: #0f172e;
                --navy4: #1f2d50;
            }
            [data-theme="light"] {
                --bg: #eef7f4;
                --bg2: #e4f2ee;
                --bg3: #ece8e0;
                --card: #ffffff;
                --card2: #faf9f5;
                --brd: #d6cfc4;
                --brd2: #c2baae;
                --txt: #1a1a1a;
                --txt2: #5a5340;
                --txt3: #8a826b;
                --sh: 0 4px 20px rgba(0, 0, 0, 0.06);
                --sh2: 0 2px 6px rgba(0, 0, 0, 0.03);
                --amber: #b8912d;
                --amber2: #c7a33c;
                --amber3: #d5b34e;
                --amber4: #e2c76e;
                --amber5: #f0dfa0;
                --aqua: #5c9b8c;
                --aqua2: #71b0a2;
                --aqua3: #86c2b5;
                --aqua4: #a6d5c9;
                --blue: var(--amber);
                --blue2: var(--amber2);
                --blue3: var(--amber3);
                --blue4: var(--amber4);
                --blue5: var(--amber5);
                --orange: var(--aqua);
                --orange2: var(--aqua2);
                --orange3: var(--aqua3);
                --orange4: var(--aqua4);
                --mint: var(--aqua3);
                --mint2: var(--aqua4);
                --red: #c04040;
                --olive: var(--amber);
                --olive2: var(--amber2);
                --olive3: var(--amber3);
                --olive4: var(--amber4);
                --sky: var(--amber);
                --sky2: var(--amber2);
                --sky3: var(--amber3);
                --navy: #0b1222;
                --navy2: #0f182c;
                --navy3: #142036;
                --navy4: #1c2a48;
            }

            /* ── GLOBAL ANIMATION KEYFRAMES ── */
            @keyframes fadeInUp {
                from {
                    opacity: 0;
                    transform: translateY(18px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            @keyframes shimmerSlide {
                0% {
                    background-position: 200% 0;
                }
                100% {
                    background-position: -200% 0;
                }
            }
            @keyframes navGlow {
                0%,
                100% {
                    box-shadow:
                        0 1px 40px rgba(0, 0, 0, 0.5),
                        0 0 60px rgba(110, 170, 158, 0.1);
                }
                50% {
                    box-shadow:
                        0 1px 40px rgba(0, 0, 0, 0.5),
                        0 0 80px rgba(110, 170, 158, 0.22);
                }
            }
            @keyframes heroPulseBlue {
                0%,
                100% {
                    opacity: 0.7;
                }
                50% {
                    opacity: 1;
                }
            }
            @keyframes orangePing {
                0% {
                    transform: scale(1);
                    opacity: 1;
                }
                80%,
                100% {
                    transform: scale(1.5);
                    opacity: 0;
                }
            }
            @keyframes floatUp {
                0%,
                100% {
                    transform: translateY(0);
                }
                50% {
                    transform: translateY(-5px);
                }
            }
            /* ── LIQUID GLASS NAV PILL GROUP ── */
            .nav-pill-group {
                display: flex;
                align-items: center;
                gap: 0;
                background: rgba(255, 255, 255, 0.06);
                border: 1px solid rgba(255, 255, 255, 0.13);
                border-radius: 40px;
                padding: 3px;
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                box-shadow:
                    inset 0 1px 0 rgba(255, 255, 255, 0.1),
                    0 2px 12px rgba(0, 0, 0, 0.25);
                position: relative;
            }
            .nav-pill-group::before {
                content: "";
                position: absolute;
                inset: 0;
                border-radius: 40px;
                background: linear-gradient(
                    135deg,
                    rgba(255, 255, 255, 0.08) 0%,
                    transparent 60%
                );
                pointer-events: none;
            }
            .nav-pill-group .nav-tab {
                border-radius: 36px;
                padding: 0.28rem 0.72rem;
                font-size: 0.78rem;
                color: rgba(255, 255, 255, 0.55);
                position: relative;
                border: none;
                background: transparent;
                transition: var(--trans);
                white-space: nowrap;
                display: flex;
                align-items: center;
                gap: 0.2rem;
            }
            .nav-pill-group .nav-tab:hover {
                background: rgba(255, 255, 255, 0.1);
                color: rgba(255, 255, 255, 0.9);
            }
            .nav-pill-group .nav-tab.active {
                background: rgba(255, 255, 255, 0.15);
                color: #fff;
                font-weight: 600;
                box-shadow:
                    0 1px 8px rgba(0, 0, 0, 0.3),
                    inset 0 1px 0 rgba(255, 255, 255, 0.2);
            }
            .nav-pill-group .nav-tab.active::after {
                display: none;
            }

            /* ── FAB GROUP (right-side floating stack) ── */
            .fab-group {
                position: fixed;
                right: 1.2rem;
                top: 50%;
                transform: translateY(-50%);
                z-index: 190;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 0.55rem;
            }
            .fab-new-post {
                display: none;
                background: linear-gradient(135deg, var(--aqua2), var(--aqua));
                border: 1px solid rgba(110, 200, 180, 0.4);
                border-radius: 50%;
                width: 40px;
                height: 40px;
                min-width: 40px;
                cursor: pointer;
                align-items: center;
                justify-content: center;
                color: #0a0f1a;
                box-shadow:
                    0 4px 18px rgba(110, 170, 158, 0.45),
                    0 0 0 1px rgba(110, 200, 180, 0.12);
                transition: var(--trans);
            }
            .fab-new-post:hover {
                background: linear-gradient(135deg, var(--aqua3), var(--aqua2));
                transform: scale(1.1);
                box-shadow: 0 6px 22px rgba(110, 170, 158, 0.6);
            }
            /* theme-toggle-fab overrides: remove its own position:fixed now inside fab-group */
            .fab-group .theme-toggle-fab {
                position: static;
                transform: none;
            }
            .fab-group .theme-toggle-fab:hover {
                transform: scale(1.1);
            }

            /* ── RESPONSIVE ── */
            @media (max-width: 680px) {
                .nav-pill-group .nav-tab {
                    font-size: 0.73rem;
                    padding: 0.26rem 0.5rem;
                }
            }

            /* ── LIGHT THEME ── */
            [data-theme="light"] .nav-pill-group {
                background: rgba(255, 255, 255, 0.1);
                border-color: rgba(255, 255, 255, 0.2);
            }
            [data-theme="light"] .nav-pill-group .nav-tab {
                color: rgba(255, 255, 255, 0.65);
            }
            [data-theme="light"] .nav-pill-group .nav-tab:hover {
                background: rgba(255, 255, 255, 0.15);
                color: #fff;
            }
            [data-theme="light"] .nav-pill-group .nav-tab.active {
                background: rgba(255, 255, 255, 0.2);
                color: #fff;
            }

            /* ── REMOVE OLD STANDALONE NAV STYLES ── */
            /* Floating theme toggle — visible only on mobile */
            /* Dark theme: white FAB — bright sun icon */
            .theme-toggle-fab {
                display: flex;
                z-index: 190;
                background: rgba(240, 245, 255, 0.92);
                backdrop-filter: blur(16px);
                -webkit-backdrop-filter: blur(16px);
                border: 1px solid rgba(255, 255, 255, 0.6);
                border-radius: 50%;
                width: 40px;
                height: 40px;
                cursor: pointer;
                align-items: center;
                justify-content: center;
                color: #0a1428;
                box-shadow:
                    0 4px 18px rgba(0, 0, 0, 0.4),
                    0 0 0 1px rgba(255, 255, 255, 0.15);
                transition: var(--trans);
            }
            .theme-toggle-fab:hover {
                background: #ffffff;
                border-color: rgba(255, 255, 255, 0.9);
                color: #070c18;
                box-shadow: 0 6px 22px rgba(110, 200, 183, 0.35);
            }
            /* Light theme: dark navy FAB — dark moon icon */
            [data-theme="light"] .theme-toggle-fab {
                background: rgba(7, 12, 24, 0.9);
                border: 1px solid rgba(7, 12, 24, 0.5);
                color: #e4eaf6;
                box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
            }
            [data-theme="light"] .theme-toggle-fab:hover {
                background: #0b1223;
                border-color: rgba(212, 163, 73, 0.4);
                color: #fff;
                box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
            }
            @media (max-width: 640px) {
                .theme-toggle {
                    display: none;
                }
            }
            /* ── LIGHT: HERO ── */
            [data-theme="light"] .hero {
                position: relative;
                background: linear-gradient(
                    160deg,
                    #070c18 0%,
                    #101a34 35%,
                    #1c2a4e 65%,
                    #0d1528 80%,
                    #070c18 100%
                );
                padding-top: 11rem;
            }
            [data-theme="light"] .hero::before {
                background-image:
                    radial-gradient(
                        ellipse at 15% 60%,
                        rgba(212, 163, 73, 0.38) 0%,
                        transparent 55%
                    ),
                    radial-gradient(
                        ellipse at 85% 25%,
                        rgba(212, 163, 73, 0.2) 0%,
                        transparent 45%
                    ),
                    radial-gradient(
                        ellipse at 55% 85%,
                        rgba(201, 168, 76, 0.15) 0%,
                        transparent 40%
                    ),
                    radial-gradient(
                        rgba(212, 163, 73, 0.06) 1px,
                        transparent 1px
                    );
                background-size:
                    100% 100%,
                    100% 100%,
                    100% 100%,
                    28px 28px;
            }
            [data-theme="light"] .hero::after {
                background: linear-gradient(
                    90deg,
                    transparent,
                    rgba(212, 163, 73, 0.7),
                    rgba(201, 168, 76, 0.5),
                    transparent
                );
            }
            [data-theme="light"] .hero-ar {
                color: rgba(199, 210, 254, 0.85);
            }
            [data-theme="light"] .hero h1 {
                background: linear-gradient(
                    110deg,
                    var(--amber2) 0%,
                    #ffffff 50%,
                    var(--amber3) 100%
                );
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }
            [data-theme="light"] .hero p {
                color: rgba(199, 210, 254, 0.9);
            }
            /* ── LIGHT: SECTION & GRID ── */
            [data-theme="light"] .sec-title {
                color: #1a1a1a;
            }
            [data-theme="light"] .sec-title::before {
                display: none;
            }
            [data-theme="light"] .sec-label {
                color: var(--amber2);
            }
            /* ── LIGHT: CARDS ── */
            [data-theme="light"] .card {
                background: #fff;
                border-color: rgba(212, 163, 73, 0.22);
                box-shadow:
                    0 4px 20px rgba(100, 70, 0, 0.08),
                    inset 0 1px 0 rgba(212, 163, 73, 0.06);
            }
            [data-theme="light"] .card::before {
                background: linear-gradient(
                    135deg,
                    rgba(212, 163, 73, 0.04) 0%,
                    transparent 60%
                );
            }
            [data-theme="light"] .card:hover {
                border-color: rgba(212, 163, 73, 0.6);
                box-shadow:
                    0 16px 40px rgba(100, 70, 0, 0.12),
                    0 0 0 1px rgba(212, 163, 73, 0.28),
                    0 0 32px rgba(212, 163, 73, 0.1);
            }
            [data-theme="light"] .card-img-wrap {
                background: var(--bg2);
            }
            [data-theme="light"] .card-author {
                color: var(--txt2);
            }
            [data-theme="light"] .card-title {
                color: var(--txt);
            }
            [data-theme="light"] .card-excerpt {
                color: var(--txt2);
            }
            [data-theme="light"] .ct-blog {
                background: rgba(212, 163, 73, 0.12);
                color: var(--amber);
                border-color: rgba(212, 163, 73, 0.3);
            }
            [data-theme="light"] .ct-guideline {
                background: rgba(212, 163, 73, 0.1);
                color: #8a6010;
                border-color: rgba(212, 163, 73, 0.28);
            }
            [data-theme="light"] .ct-recent {
                background: rgba(212, 163, 73, 0.12);
                color: var(--amber2);
                border-color: rgba(212, 163, 73, 0.25);
            }
            [data-theme="light"] .post-tag {
                color: var(--amber3);
                background: rgba(110, 170, 158, 0.08);
                border-color: rgba(212, 163, 73, 0.2);
            }
            [data-theme="light"] .post-tag:hover {
                background: rgba(212, 163, 73, 0.15);
                border-color: rgba(212, 163, 73, 0.4);
            }
            [data-theme="light"] .card-footer-row {
                color: var(--txt2);
            }
            [data-theme="light"] .cact {
                border-top-color: rgba(212, 163, 73, 0.2);
            }
            [data-theme="light"] .ca {
                color: #5a4f3a;
                border-right-color: rgba(212, 163, 73, 0.15);
            }
            [data-theme="light"] .ca:hover {
                background: rgba(212, 163, 73, 0.08);
                color: #1a1a1a;
            }
            [data-theme="light"] .ca.cal {
                color: var(--blue2);
            }
            [data-theme="light"] .ca.cas {
                color: var(--orange2);
            }
            [data-theme="light"] .shimmer {
                background: linear-gradient(
                    100deg,
                    #f4f2ee 25%,
                    rgba(212, 163, 73, 0.08) 50%,
                    #f4f2ee 75%
                );
                background-size: 200% 100%;
            }
            /* ── LIGHT: ABOUT & FOOTER ── */
            [data-theme="light"] .about-section {
                background: linear-gradient(
                    160deg,
                    #070c18 0%,
                    #0f1a2e 35%,
                    #162238 65%,
                    #070c18 100%
                );
                border-top: 1px solid rgba(110, 170, 158, 0.25);
            }
            [data-theme="light"] .about-section h3 {
                background: linear-gradient(
                    90deg,
                    var(--amber3),
                    #ffffff,
                    var(--aqua3)
                );
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }
            [data-theme="light"] .about-section p {
                color: rgba(180, 195, 210, 0.75);
            }
            [data-theme="light"] .about-btn-sec {
                background: rgba(212, 163, 73, 0.1);
                color: var(--amber3);
                border-color: rgba(212, 163, 73, 0.3);
            }
            [data-theme="light"] .about-btn-sec:hover {
                background: rgba(212, 163, 73, 0.22);
                border-color: rgba(212, 163, 73, 0.55);
                color: #fff;
            }
            [data-theme="light"] footer {
                background: #070c18;
                border-top: 1px solid rgba(212, 163, 73, 0.15);
            }
            [data-theme="light"] footer p {
                color: rgba(140, 155, 190, 0.55);
            }
            /* ── LIGHT: MODALS ── */
            [data-theme="light"] .modal .mb {
                background: #fff;
                border-color: rgba(212, 163, 73, 0.15);
                box-shadow: 0 24px 80px rgba(8, 8, 38, 0.15);
            }
            [data-theme="light"] .mcl {
                background: rgba(0, 0, 0, 0.06);
                border-color: rgba(0, 0, 0, 0.12);
                color: var(--txt2);
            }
            [data-theme="light"] .mcl:hover {
                background: rgba(0, 0, 0, 0.12);
                color: var(--txt);
            }
            [data-theme="light"] .mo {
                background: rgba(0, 0, 0, 0.4);
            }
            [data-theme="light"] input,
            [data-theme="light"] textarea,
            [data-theme="light"] select {
                background: rgba(0, 0, 0, 0.04);
                border-color: var(--brd);
                color: var(--txt);
            }
            [data-theme="light"] input:focus,
            [data-theme="light"] textarea:focus {
                border-color: var(--olive3);
                box-shadow: 0 0 0 3px rgba(212, 163, 73, 0.12);
            }
            [data-theme="light"] input::placeholder,
            [data-theme="light"] textarea::placeholder {
                color: var(--txt3);
            }
            [data-theme="light"] .fg label {
                color: var(--txt2);
            }
            /* ── LIGHT: SEARCH MODAL ── */
            [data-theme="light"] .srch-modal-box {
                background: rgba(245, 245, 251, 0.99);
                border-color: rgba(212, 163, 73, 0.14);
                box-shadow: 0 24px 80px rgba(0, 0, 0, 0.15);
            }
            [data-theme="light"] .srch-hd {
                border-bottom-color: rgba(5, 5, 25, 0.06);
            }
            [data-theme="light"] .srch-input-wrap {
                background: rgba(0, 0, 0, 0.05);
                border-color: rgba(0, 0, 0, 0.12);
            }
            [data-theme="light"] .srch-input-wrap:focus-within {
                border-color: rgba(212, 163, 73, 0.6);
                box-shadow: 0 0 0 3px rgba(212, 163, 73, 0.12);
            }
            [data-theme="light"] .srch-input-wrap svg {
                color: rgba(0, 0, 0, 0.3);
            }
            [data-theme="light"] .srch-input-wrap input {
                color: var(--txt);
            }
            [data-theme="light"] .srch-input-wrap input::placeholder {
                color: rgba(0, 0, 0, 0.3);
            }
            [data-theme="light"] .srch-clr-btn {
                color: rgba(0, 0, 0, 0.35);
            }
            [data-theme="light"] .srch-clr-btn:hover {
                color: var(--txt);
            }
            [data-theme="light"] .srch-close-btn {
                background: rgba(0, 0, 0, 0.05);
                border-color: rgba(0, 0, 0, 0.12);
                color: rgba(0, 0, 0, 0.45);
            }
            [data-theme="light"] .srch-close-btn:hover {
                background: rgba(0, 0, 0, 0.1);
                color: var(--txt);
            }
            [data-theme="light"] .srch-filters {
                border-bottom-color: rgba(0, 0, 0, 0.07);
            }
            [data-theme="light"] .srch-filter-label {
                color: var(--txt2);
            }
            [data-theme="light"] .srch-pill {
                background: rgba(0, 0, 0, 0.05);
                border-color: rgba(0, 0, 0, 0.1);
                color: rgba(0, 0, 0, 0.5);
            }
            [data-theme="light"] .srch-pill:hover {
                color: var(--txt);
                border-color: rgba(0, 0, 0, 0.25);
            }
            [data-theme="light"] .srch-pill.active {
                background: rgba(212, 163, 73, 0.14);
                color: var(--olive);
                border-color: rgba(212, 163, 73, 0.55);
            }
            [data-theme="light"] .srch-month-inp {
                background: rgba(0, 0, 0, 0.05);
                border-color: rgba(0, 0, 0, 0.1);
                color: var(--txt);
                color-scheme: light;
            }
            [data-theme="light"] .srch-custom-sel-btn {
                background: rgba(0, 0, 0, 0.05);
                border-color: rgba(0, 0, 0, 0.1);
                color: var(--txt);
            }
            [data-theme="light"] .srch-custom-sel-btn:hover {
                border-color: rgba(212, 163, 73, 0.55);
                background: rgba(5, 5, 25, 0.06);
            }
            [data-theme="light"] .srch-custom-sel-dd {
                background: var(--card);
                border-color: var(--brd);
                box-shadow: 0 10px 32px rgba(0, 0, 0, 0.15);
            }
            [data-theme="light"] .srch-dd-item {
                color: var(--txt2);
            }
            [data-theme="light"] .srch-dd-item:hover {
                background: rgba(0, 0, 0, 0.05);
                color: var(--txt);
            }
            [data-theme="light"] .srch-dd-active {
                color: var(--olive);
                background: rgba(212, 163, 73, 0.1);
            }
            [data-theme="light"] .srch-status {
                color: var(--txt2);
                border-bottom-color: rgba(0, 0, 0, 0.06);
            }
            [data-theme="light"] .srch-item {
                border-bottom-color: rgba(0, 0, 0, 0.06);
            }
            [data-theme="light"] .srch-item:hover {
                background: rgba(0, 0, 0, 0.04);
            }
            [data-theme="light"] .srch-item-title {
                color: var(--txt);
            }
            [data-theme="light"] .srch-tag-chip {
                background: rgba(0, 0, 0, 0.06);
                border-color: rgba(0, 0, 0, 0.12);
                color: var(--txt2);
            }
            /* ── LIGHT: COMMENT BOX ── */
            [data-theme="light"] #commentBox {
                background: rgba(245, 245, 251, 0.99);
                border-color: rgba(212, 163, 73, 0.14);
                box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
            }
            [data-theme="light"] .cb-header {
                background: rgba(0, 0, 0, 0.03);
                border-bottom-color: rgba(0, 0, 0, 0.07);
                color: var(--txt);
            }
            [data-theme="light"] .cb-close-btn {
                background: rgba(0, 0, 0, 0.06);
                border-color: rgba(0, 0, 0, 0.12);
                color: var(--txt2);
            }
            [data-theme="light"] .cmi {
                border-bottom-color: var(--brd);
            }
            /* ── LIGHT: TAG PICKER ── */
            [data-theme="light"] .tag-dropdown-box {
                background: var(--card);
                border-color: var(--brd);
                box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12);
            }
            [data-theme="light"] .tag-dd-item {
                color: var(--txt2);
            }
            [data-theme="light"] .tag-dd-item:hover {
                background: rgba(0, 0, 0, 0.04);
                color: var(--txt);
            }
            [data-theme="light"] .tag-dd-new {
                color: var(--olive2);
            }
            [data-theme="light"] .tag-dd-empty {
                color: var(--txt3);
            }
            /* ── LIGHT: PROFILE ── */
            [data-theme="light"] .ptab {
                background: rgba(0, 0, 0, 0.05);
                border-color: rgba(0, 0, 0, 0.1);
                color: var(--txt2);
            }
            [data-theme="light"] .ptab:hover {
                background: rgba(0, 0, 0, 0.09);
                color: var(--txt);
            }
            [data-theme="light"] .ptab.active {
                background: rgba(212, 163, 73, 0.12);
                color: var(--olive);
                border-color: rgba(212, 163, 73, 0.5);
            }
            [data-theme="light"] .spr {
                background: rgba(0, 0, 0, 0.04);
                border-color: var(--brd);
            }
            [data-theme="light"] .spr:hover {
                background: rgba(5, 5, 25, 0.06);
            }
            [data-theme="light"] .mrow {
                background: rgba(0, 0, 0, 0.03);
                border-color: var(--brd);
            }
            [data-theme="light"] .mrow:hover {
                background: rgba(0, 0, 0, 0.06);
            }
            [data-theme="light"] .sir {
                border-bottom-color: var(--brd);
            }

            /* ── LIGHT: PROFILE MODAL FULL ── */
            [data-theme="light"] .profmb {
                background: var(--card);
            }
            [data-theme="light"] .ph {
                border-bottom-color: var(--brd);
            }
            [data-theme="light"] .ph h2 {
                color: var(--txt);
            }
            [data-theme="light"] .ph p {
                color: var(--txt2);
            }
            [data-theme="light"] .ptabs {
                border-bottom-color: var(--brd);
            }
            [data-theme="light"] .tab-lbl {
                color: var(--txt3);
            }
            [data-theme="light"] .spd {
                color: var(--txt3);
            }
            /* search inputs in profile */
            [data-theme="light"] .mbh input {
                background: rgba(0, 0, 0, 0.04);
                border-color: rgba(0, 0, 0, 0.12);
                color: var(--txt);
            }
            [data-theme="light"] .mbh input::placeholder {
                color: var(--txt3);
            }
            [data-theme="light"] .mbh input:focus {
                border-color: rgba(110, 200, 183, 0.55);
            }
            /* filter role buttons */
            [data-theme="light"] .rf {
                background: rgba(0, 0, 0, 0.04);
                border-color: rgba(0, 0, 0, 0.1);
                color: var(--txt2);
            }
            [data-theme="light"] .rf:hover {
                background: rgba(5, 5, 25, 0.06);
                color: var(--txt);
            }
            [data-theme="light"] .rf.active {
                background: rgba(212, 163, 73, 0.12);
                color: var(--olive);
                border-color: rgba(212, 163, 73, 0.5);
            }
            /* member stats */
            [data-theme="light"] .msc {
                background: rgba(0, 0, 0, 0.04);
                border-color: rgba(0, 0, 0, 0.1);
                color: var(--txt2);
            }
            [data-theme="light"] .msc strong {
                color: var(--txt);
            }
            /* member rows */
            [data-theme="light"] .mrow {
                background: rgba(0, 0, 0, 0.03);
                border-color: var(--brd);
            }
            [data-theme="light"] .mrow:hover {
                background: rgba(0, 0, 0, 0.06);
            }
            [data-theme="light"] .minf strong {
                color: var(--txt);
            }
            [data-theme="light"] .minf small {
                color: var(--txt2);
            }
            /* role assign buttons */
            [data-theme="light"] .rb {
                border-color: rgba(0, 0, 0, 0.1);
                color: rgba(0, 0, 0, 0.35);
            }
            [data-theme="light"] .rb.maintainer.rba,
            [data-theme="light"] .rb.maintainer:hover {
                background: rgba(212, 163, 73, 0.12);
                color: var(--olive);
                border-color: rgba(212, 163, 73, 0.5);
            }
            [data-theme="light"] .rb.admin.rba,
            [data-theme="light"] .rb.admin:hover {
                background: rgba(200, 60, 60, 0.1);
                color: #c04040;
                border-color: rgba(200, 60, 60, 0.3);
            }
            [data-theme="light"] .rb.user.rba,
            [data-theme="light"] .rb.user:hover {
                background: rgba(0, 0, 0, 0.07);
                color: var(--txt2);
                border-color: rgba(0, 0, 0, 0.2);
            }
            /* settings rows */
            [data-theme="light"] .sir {
                border-bottom-color: var(--brd);
            }
            [data-theme="light"] .sir label {
                color: var(--txt3);
            }
            [data-theme="light"] .sir span {
                color: var(--txt);
            }
            /* saved posts list */
            [data-theme="light"] .spr {
                background: rgba(0, 0, 0, 0.04);
                border-color: var(--brd);
                color: var(--txt);
            }
            [data-theme="light"] .spr:hover {
                background: rgba(5, 5, 25, 0.06);
                border-color: rgba(100, 160, 40, 0.3);
            }
            [data-theme="light"] .spd {
                color: var(--txt3);
            }
            /* danger button */
            [data-theme="light"] .danger-btn {
                background: rgba(180, 40, 40, 0.07);
                border-color: rgba(180, 40, 40, 0.2);
                color: #b83030;
            }
            [data-theme="light"] .danger-btn:hover {
                background: var(--red);
                color: #fff;
                border-color: var(--red);
            }
            /* create modal cancel button */
            [data-theme="light"] .canbtn {
                background: rgba(0, 0, 0, 0.05);
                border-color: rgba(0, 0, 0, 0.1);
                color: var(--txt2);
            }
            [data-theme="light"] .canbtn:hover {
                background: rgba(0, 0, 0, 0.09);
                color: var(--txt);
            }
            /* My Posts tab */
            [data-theme="light"] .mpr {
                background: var(--card2);
                border-color: var(--brd);
            }
            [data-theme="light"] .mpr:hover {
                background: var(--card);
                border-color: rgba(100, 160, 40, 0.3);
            }
            [data-theme="light"] .mpr-title {
                color: var(--txt);
            }
            [data-theme="light"] .mpr-meta {
                color: var(--txt3);
            }
            [data-theme="light"] .mpr-tag {
                background: rgba(0, 0, 0, 0.05);
                border-color: rgba(0, 0, 0, 0.1);
                color: var(--txt3);
            }
            [data-theme="light"] .mp-badge {
                background: var(--blue2);
            }
            /* report panel */
            [data-theme="light"] .rp-section-lbl {
                color: var(--txt3);
                border-bottom-color: var(--brd);
            }
            [data-theme="light"] .rp-section-resolved {
                color: var(--olive2);
            }
            [data-theme="light"] .rp-item {
                border-color: var(--brd);
                background: var(--card2);
            }
            [data-theme="light"] .rp-item:hover {
                background: var(--card);
            }
            [data-theme="light"] .rp-author {
                color: var(--txt2);
            }
            [data-theme="light"] .rp-text {
                color: var(--txt);
                background: rgba(0, 0, 0, 0.03);
            }
            [data-theme="light"] .rp-resolved-badge {
                background: rgba(212, 163, 73, 0.12);
                color: var(--olive);
            }
            [data-theme="light"] .rp-blocked-badge {
                background: rgba(180, 40, 40, 0.1);
                color: #c03030;
            }
            [data-theme="light"] .rp-btn {
                background: rgba(0, 0, 0, 0.05);
                border-color: rgba(0, 0, 0, 0.12);
                color: var(--txt2);
            }
            [data-theme="light"] .rp-btn:hover {
                background: rgba(0, 0, 0, 0.09);
                color: var(--txt);
            }
            [data-theme="light"] .rp-del:hover {
                background: rgba(180, 40, 40, 0.1);
                color: #b83030;
                border-color: rgba(180, 40, 40, 0.25);
            }
            [data-theme="light"] .rp-block:hover {
                background: rgba(180, 40, 40, 0.1);
                color: #b83030;
            }
            [data-theme="light"] .rp-unblock:hover {
                background: rgba(212, 163, 73, 0.12);
                color: var(--olive);
            }
            /* comment elements */
            [data-theme="light"] .cm-pin-badge {
                background: rgba(212, 163, 73, 0.12);
                color: var(--olive);
            }
            [data-theme="light"] .reply-ref {
                background: rgba(212, 163, 73, 0.08);
                border-left-color: var(--sky2);
                color: var(--sky2);
            }
            [data-theme="light"] .reply-chip {
                background: rgba(212, 163, 73, 0.08);
                border-color: rgba(212, 163, 73, 0.25);
                color: var(--sky2);
            }
            [data-theme="light"] .cmi {
                background: rgba(0, 0, 0, 0.02);
            }
            [data-theme="light"] .cmi strong {
                color: var(--txt);
            }
            [data-theme="light"] .cmi p {
                color: var(--txt2);
            }
            [data-theme="light"] .cmt {
                color: var(--txt3);
            }
            /* lightbox */
            [data-theme="light"] #lightbox {
                background: rgba(0, 0, 0, 0.85);
            }
            /* you badge */
            [data-theme="light"] .you {
                background: rgba(212, 163, 73, 0.14);
                color: var(--olive);
            }
            /* post modal header meta */
            [data-theme="light"] .pm-meta {
                color: var(--txt2);
            }
            [data-theme="light"] .pm-type-badge {
            }
            /* ── LIGHT: TOAST ── */
            [data-theme="light"] .toast {
                background: rgba(245, 245, 251, 0.99);
                border-color: rgba(0, 0, 0, 0.12);
                color: var(--txt);
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
            }
            [data-theme="light"] .toast.error {
                border-color: rgba(180, 40, 40, 0.3);
                color: #c03030;
            }
            [data-theme="light"] .toast.success {
                border-color: rgba(212, 163, 73, 0.5);
                color: var(--olive);
            }
            /* ── LIGHT: SCROLLBAR ── */
            [data-theme="light"] ::-webkit-scrollbar-thumb {
                background: var(--brd2);
            }
            [data-theme="light"] ::-webkit-scrollbar-thumb:hover {
                background: var(--blue2);
            }
            [data-theme="light"] .srch-month-inp {
                color-scheme: light;
            }
            [data-theme="light"] .fg input[type="datetime-local"] {
                color-scheme: light;
                background: rgba(0, 0, 0, 0.04);
                border-color: var(--brd);
                color: var(--txt);
            }
            * {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
            }
            svg {
                vertical-align: middle;
                display: inline-block;
            }
            body {
                font-family: "Hind Siliguri", "Inter", sans-serif;
                background: var(--bg);
                color: var(--txt);
                min-height: 100vh;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
            ::-webkit-scrollbar {
                width: 4px;
            }
            ::-webkit-scrollbar-track {
                background: transparent;
            }
            ::-webkit-scrollbar-thumb {
                background: var(--brd2);
                border-radius: 4px;
            }
            ::-webkit-scrollbar-thumb:hover {
                background: var(--blue2);
            }
            /* ── LIQUID GLASS FLOATING NAV ── */
            @keyframes navGlow {
                0%,
                100% {
                    box-shadow:
                        0 8px 32px rgba(0, 0, 0, 0.5),
                        0 2px 12px rgba(110, 200, 183, 0.16),
                        inset 0 1px 0 rgba(255, 255, 255, 0.08);
                }
                50% {
                    box-shadow:
                        0 12px 44px rgba(0, 0, 0, 0.6),
                        0 2px 18px rgba(110, 200, 183, 0.26),
                        inset 0 1px 0 rgba(255, 255, 255, 0.12);
                }
            }
            .nav-outer {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                z-index: 200;
                padding: 0.7rem 1.4rem;
                pointer-events: none;
                background: transparent;
            }
            nav {
                background: rgba(7, 12, 24, 0.55);
                backdrop-filter: blur(28px) saturate(160%);
                -webkit-backdrop-filter: blur(28px) saturate(160%);
                border: 1px solid rgba(110, 170, 158, 0.22);
                border-top: 1px solid rgba(255, 255, 255, 0.14);
                border-bottom: 1px solid rgba(0, 0, 0, 0.18);
                border-radius: 60px;
                height: 54px;
                padding: 0 5px;
                display: grid;
                grid-template-columns: 1fr auto 1fr;
                align-items: center;
                max-width: 980px;
                margin: 0 auto;
                pointer-events: all;
                animation: navGlow 6s ease-in-out infinite;
                position: relative;
                overflow: hidden;
            }
            [data-theme="light"] .nav-outer {
                background: transparent;
            }
            [data-theme="light"] nav {
                background: rgba(7, 12, 24, 0.52);
                backdrop-filter: blur(28px) saturate(160%);
                -webkit-backdrop-filter: blur(28px) saturate(160%);
                border-color: rgba(110, 170, 158, 0.22);
                border-top-color: rgba(255, 255, 255, 0.18);
            }
            /* glare streak */
            nav::before {
                content: "";
                position: absolute;
                top: 0;
                left: 10%;
                right: 10%;
                height: 1px;
                background: linear-gradient(
                    90deg,
                    transparent,
                    rgba(255, 255, 255, 0.38),
                    transparent
                );
                pointer-events: none;
            }
            /* ── THREE ZONES ── */
            .nav-left {
                display: flex;
                align-items: center;
                padding-left: 0.3rem;
            }
            .nav-center {
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .nav-center-divider {
                display: none;
            }
            .nav-right {
                display: flex;
                align-items: center;
                gap: 0.2rem;
                justify-content: flex-end;
                padding-right: 0.3rem;
            }
            /* ── LOGO (left: img then text) ── */
            .nav-logo {
                display: flex;
                align-items: center;
                gap: 0.42rem;
                text-decoration: none;
            }
            .nav-logo img {
                height: 36px;
                width: 36px;
                min-width: 36px;
                object-fit: contain;
                border-radius: 50%;
                border: 1.5px solid rgba(255, 255, 255, 0.16);
                box-shadow: 0 0 10px rgba(110, 200, 183, 0.28);
            }
            .nav-logo-text {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 0;
                line-height: 1;
                min-width: 0;
            }
            .nav-logo-text strong {
                font-family: "Amiri", serif;
                font-size: 0.9rem;
                background: linear-gradient(
                    100deg,
                    var(--amber2) 0%,
                    var(--amber4) 45%,
                    var(--aqua3) 100%
                );
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                font-weight: 700;
                white-space: nowrap;
                line-height: 1.5;
            }
            .nav-logo-text em {
                font-style: normal;
                color: rgba(180, 190, 220, 0.42);
                font-size: 0.42rem;
                letter-spacing: 2px;
                font-family: "IBM Plex Mono", monospace;
                white-space: nowrap;
                text-transform: uppercase;
                text-align: left;
            }
            /* ── TABS ── */
            .nav-tab {
                background: none;
                border: none;
                color: rgba(255, 255, 255, 0.55);
                padding: 0.3rem 0.68rem;
                border-radius: 40px;
                cursor: pointer;
                font-size: 0.8rem;
                font-family: inherit;
                font-weight: 500;
                transition: var(--trans);
                flex-shrink: 0;
                letter-spacing: 0.01em;
                position: relative;
                white-space: nowrap;
            }
            .nav-tab:hover {
                background: rgba(255, 255, 255, 0.1);
                color: rgba(255, 255, 255, 0.9);
            }
            .nav-tab.active {
                color: #fff;
                font-weight: 600;
                background: rgba(255, 255, 255, 0.11);
            }
            .nav-tab.active::after {
                content: "";
                position: absolute;
                bottom: 5px;
                left: 50%;
                transform: translateX(-50%);
                width: 54%;
                height: 2px;
                background: linear-gradient(
                    90deg,
                    transparent,
                    var(--orange2),
                    transparent
                );
                border-radius: 2px;
                box-shadow: 0 0 7px rgba(201, 168, 76, 0.6);
            }
            /* ── LEFT CONTROLS ── */
            /* nav-search-btn removed — search is now a nav-tab */
            .theme-toggle {
                background: rgba(255, 255, 255, 0.07);
                border: 1px solid rgba(255, 255, 255, 0.11);
                border-radius: 50%;
                color: rgba(255, 255, 255, 0.65);
                width: 31px;
                height: 31px;
                min-width: 31px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: var(--trans);
                flex-shrink: 0;
            }
            .theme-toggle:hover {
                background: rgba(255, 255, 255, 0.14);
                color: #fff;
            }
            #loginBtn {
                background: rgba(255, 255, 255, 0.95);
                color: #1a1b2e;
                border: none;
                padding: 0.28rem 0.78rem;
                border-radius: 40px;
                cursor: pointer;
                font-size: 0.76rem;
                font-family: inherit;
                display: flex;
                align-items: center;
                gap: 0.26rem;
                font-weight: 700;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
                transition: var(--trans);
                white-space: nowrap;
            }
            #loginBtn:hover {
                background: #fff;
                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
                transform: translateY(-1px);
            }
            #profileArea {
                display: none;
                align-items: center;
                gap: 0.26rem;
                flex-shrink: 0;
            }
            .pa-btn {
                background: rgba(255, 255, 255, 0.07);
                border: 1px solid rgba(255, 255, 255, 0.11);
                border-radius: 40px;
                padding: 0.24rem 0.48rem;
                cursor: pointer;
                color: #fff;
                font-size: 0.74rem;
                font-family: inherit;
                display: flex;
                align-items: center;
                gap: 0.26rem;
                transition: var(--trans);
                flex-direction: row-reverse;
            }
            .pa-btn:hover {
                background: rgba(255, 255, 255, 0.14);
                border-color: rgba(255, 255, 255, 0.22);
            }
            .pa-img {
                width: 23px;
                height: 23px;
                border-radius: 50%;
                object-fit: cover;
                border: 1.5px solid var(--olive3);
            }
            .pa-name {
                max-width: 65px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            /* #newPostBtn old nav style removed — now a FAB */
            .nav-sp {
                display: none;
            }
            /* ── RESPONSIVE ── */
            @media (max-width: 780px) {
                .nav-logo-text strong {
                    font-size: 0.78rem;
                }
                .nav-tab {
                    font-size: 0.74rem;
                    padding: 0.27rem 0.48rem;
                }
            }
            @media (max-width: 640px) {
                .nav-outer {
                    padding: 0.5rem 0.6rem;
                }
                nav {
                    height: 48px;
                    padding: 0 3px;
                }
                .nav-logo-text {
                    display: none;
                }
                .nav-logo img {
                    height: 32px;
                    width: 32px;
                    min-width: 32px;
                }
                #loginBtn {
                    padding: 0.22rem 0.22rem;
                    min-width: 32px;
                    min-height: 32px;
                    border-radius: 50%;
                    justify-content: center;
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
                }
                #loginBtn .login-label {
                    display: none;
                }
                #loginBtn .g-logo {
                    width: 18px;
                    height: 18px;
                }
                .pa-name {
                    display: none;
                }
                /* strip pill shape from profile on mobile — bare circle only */
                .pa-btn {
                    background: transparent !important;
                    border: none !important;
                    padding: 0 !important;
                    gap: 0 !important;
                    box-shadow: none !important;
                }
                .pa-btn:hover {
                    background: transparent !important;
                    border: none !important;
                }
                [data-theme="light"] .pa-btn {
                    background: transparent !important;
                    border: none !important;
                }
                .pa-img {
                    width: 32px;
                    height: 32px;
                    border: 2px solid var(--aqua3);
                }
            }
            /* Mobile icon-only pill */
            @media (max-width: 520px) {
                .nav-tab .nt-label {
                    display: none;
                }
                .nav-tab .nt-icon {
                    display: flex;
                }
                .nav-pill-group {
                    padding: 2px;
                    gap: 0;
                }
                .nav-pill-group .nav-tab {
                    padding: 0.45rem 1.1rem;
                }
                .nav-tab .nt-icon svg {
                    width: 18px;
                    height: 18px;
                }
            }
            @media (min-width: 521px) {
                .nav-tab .nt-icon {
                    display: none;
                }
                .nav-tab .nt-label {
                    display: inline;
                }
                /* search tab: show icon + text together on desktop */
                .nav-tab-search .nt-icon {
                    display: flex;
                }
                .nav-tab-search {
                    gap: 0.3rem;
                }
            }
            /* ── LIGHT THEME ── */
            [data-theme="light"] .nav-tab {
                color: rgba(255, 255, 255, 0.6);
            }
            [data-theme="light"] .nav-tab:hover {
                background: rgba(255, 255, 255, 0.13);
                color: #fff;
            }
            [data-theme="light"] .nav-tab.active {
                color: #fff;
                background: rgba(255, 255, 255, 0.14);
            }
            /* [data-theme] nav-search-btn removed */
            [data-theme="light"] .theme-toggle {
                background: rgba(255, 255, 255, 0.1);
                border-color: rgba(255, 255, 255, 0.18);
                color: rgba(255, 255, 255, 0.75);
            }
            [data-theme="light"] .theme-toggle:hover {
                background: rgba(255, 255, 255, 0.2);
                color: #fff;
            }
            [data-theme="light"] #loginBtn {
                background: #fff;
                color: #1a1b2e;
            }
            [data-theme="light"] .pa-btn {
                background: rgba(255, 255, 255, 0.1);
                border-color: rgba(255, 255, 255, 0.2);
                color: #fff;
            }
            /* [data-theme] #newPostBtn removed */

            /* SRCH */
            .srch-wrap {
                display: flex;
                align-items: center;
                gap: 0.4rem;
            }
            .srch {
                display: flex;
                align-items: center;
                background: rgba(255, 255, 255, 0.07);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 8px;
                padding: 0.3rem 0.6rem;
                gap: 0.3rem;
            }
            .srch input {
                background: none;
                border: none;
                outline: none;
                color: #fff;
                font-size: 0.8rem;
                width: 120px;
                font-family: inherit;
            }
            .srch input::placeholder {
                color: rgba(255, 255, 255, 0.3);
            }
            .srch-btn {
                background: var(--olive);
                border: none;
                color: #fff;
                border-radius: 6px;
                padding: 0.28rem 0.6rem;
                cursor: pointer;
                font-size: 0.75rem;
                font-family: inherit;
            }

            /* HERO */
            .hero {
                background: linear-gradient(
                    160deg,
                    #070c18 0%,
                    #101a34 35%,
                    #1c2a4e 65%,
                    #0d1528 80%,
                    #070c18 100%
                );
                padding: 11rem 2rem 3rem;
                text-align: center;
                border-bottom: 1px solid rgba(110, 170, 158, 0.3);
                position: relative;
                overflow: hidden;
            }
            .hero::before {
                content: "";
                position: absolute;
                inset: 0;
                background-image:
                    radial-gradient(
                        ellipse at 15% 60%,
                        rgba(110, 200, 183, 0.25) 0%,
                        transparent 55%
                    ),
                    radial-gradient(
                        ellipse at 85% 25%,
                        rgba(110, 200, 183, 0.18) 0%,
                        transparent 45%
                    ),
                    radial-gradient(
                        ellipse at 55% 85%,
                        rgba(110, 170, 158, 0.12) 0%,
                        transparent 40%
                    ),
                    radial-gradient(
                        rgba(110, 170, 158, 0.04) 1px,
                        transparent 1px
                    );
                background-size:
                    100% 100%,
                    100% 100%,
                    100% 100%,
                    28px 28px;
                pointer-events: none;
                animation: heroPulseBlue 5s ease-in-out infinite;
            }
            .hero::after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 2px;
                background: linear-gradient(
                    90deg,
                    transparent,
                    rgba(110, 200, 183, 0.55),
                    rgba(110, 170, 158, 0.45),
                    transparent
                );
            }
            /* ── HERO FLAT: strip all bg/overlays for activities & guidelines tabs ── */
            .hero--flat::before,
            .hero--flat::after {
                display: none !important;
            }
            html body .hero.hero--flat {
                background: var(--bg) !important;
                background-image: none !important;
                border-bottom: none !important;
            }
            /* ── HERO SPLIT LAYOUT ── */
            .hero {
                background:
                    linear-gradient(
                        to bottom,
                        #060d09 0%,
                        #060d09 12%,
                        transparent 32%
                    ),
                    linear-gradient(
                        135deg,
                        #030a05 0%,
                        #050f07 25%,
                        #071409 50%,
                        #071220 80%,
                        #040c18 100%
                    ) !important;
                padding: 6rem 2rem 0 !important;
                text-align: left !important;
                border-bottom: 1px solid rgba(34, 197, 94, 0.15) !important;
            }
            .hero::before {
                background-image:
                    radial-gradient(
                        ellipse at 18% 55%,
                        rgba(0, 160, 60, 0.18) 0%,
                        rgba(0, 100, 35, 0.06) 40%,
                        transparent 65%
                    ),
                    radial-gradient(
                        ellipse at 50% 100%,
                        rgba(60, 35, 6, 0.25) 0%,
                        rgba(25, 16, 6, 0.12) 40%,
                        transparent 65%
                    ),
                    radial-gradient(
                        ellipse at 82% 40%,
                        rgba(6, 60, 85, 0.18) 0%,
                        rgba(4, 38, 60, 0.06) 40%,
                        transparent 65%
                    ),
                    radial-gradient(
                        rgba(34, 197, 94, 0.015) 1px,
                        transparent 1px
                    ) !important;
                background-size:
                    100% 100%,
                    100% 100%,
                    100% 100%,
                    28px 28px !important;
                animation: none !important;
            }
            .hero::after {
                background: linear-gradient(
                    90deg,
                    transparent,
                    rgba(34, 197, 94, 0.08),
                    transparent
                ) !important;
            }

            /* split: left content + right logo card */
            .hero-split {
                display: grid;
                grid-template-columns: 1fr auto;
                align-items: center;
                gap: 3rem;
                max-width: 1100px;
                margin: 0 auto;
                padding-bottom: 3.5rem;
                position: relative;
                z-index: 1;
            }
            .hero-left {
                display: flex;
                flex-direction: column;
                gap: 1.2rem;
            }
            .hero-left > *:nth-child(2) {
                margin-top: 1rem;
            }

            /* pill badge */
            .hero-pill {
                display: inline-flex;
                align-items: center;
                gap: 0.5rem;
                background: rgba(34, 197, 94, 0.1);
                border: 1px solid rgba(34, 197, 94, 0.3);
                border-radius: 999px;
                padding: 0.3rem 0.9rem;
                font-size: 0.78rem;
                color: #86efac;
                width: fit-content;
            }
            .hero-pill svg {
                width: 13px;
                height: 13px;
            }
            .hero-pill-dot {
                color: rgba(134, 239, 172, 0.5);
            }

            /* big title */
            .hero-title-top {
                font-family: "Hind Siliguri", sans-serif;
                font-size: clamp(3.8rem, 8vw, 6.5rem);
                font-weight: 700;
                color: #ffffff;
                line-height: 1.05;
                margin: 0;
            }
            .hero-title-bottom {
                font-family: "Hind Siliguri", sans-serif;
                font-size: clamp(3.8rem, 8vw, 6.5rem);
                font-weight: 700;
                line-height: 1.05;
                margin: 0;
                background: linear-gradient(120deg, #4ade80 0%, #86efac 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }

            /* quran quote */
            .hero-quote {
                border-left: 3px solid rgba(34, 197, 94, 0.5);
                padding-left: 1rem;
                max-width: 520px;
            }
            .hero-quote p {
                font-family: "Hind Siliguri", sans-serif;
                font-size: 0.92rem;
                color: rgba(255, 255, 255, 0.75);
                line-height: 1.8;
                margin: 0 0 0.4rem;
            }
            .hero-quote cite {
                font-size: 0.75rem;
                color: #4ade80;
                font-style: normal;
                letter-spacing: 0.05em;
            }

            /* CTA buttons */
            .hero-btns {
                display: flex;
                gap: 0.75rem;
                flex-wrap: wrap;
            }
            .hero-btn-primary {
                display: inline-flex;
                align-items: center;
                gap: 0.4rem;
                background: #16a34a;
                color: #fff;
                border: none;
                border-radius: 8px;
                padding: 0.65rem 1.3rem;
                font-size: 0.88rem;
                font-weight: 600;
                cursor: pointer;
                transition:
                    background 0.2s,
                    transform 0.15s;
            }
            .hero-btn-primary:hover {
                background: #15803d;
                transform: translateY(-1px);
            }
            .hero-btn-secondary {
                display: inline-flex;
                align-items: center;
                gap: 0.4rem;
                background: transparent;
                color: rgba(255, 255, 255, 0.85);
                border: 1px solid rgba(255, 255, 255, 0.25);
                border-radius: 8px;
                padding: 0.65rem 1.3rem;
                font-size: 0.88rem;
                font-weight: 500;
                cursor: pointer;
                transition:
                    border-color 0.2s,
                    color 0.2s;
            }
            .hero-btn-secondary:hover {
                border-color: rgba(255, 255, 255, 0.5);
                color: #fff;
            }

            /* right: logo card */
            .hero-logo-card {
                background: #080f0a;
                border: 1px solid rgba(34, 197, 94, 0.2);
                border-radius: 20px;
                padding: 1.1rem;
                box-shadow:
                    0 0 0 1px rgba(34, 197, 94, 0.1),
                    0 16px 64px rgba(0, 0, 0, 0.6);
            }
            .hero-logo-card img {
                width: 260px;
                height: 260px;
                object-fit: cover;
                border-radius: 12px;
                display: block;
            }

            /* ── FEATURE BOXES ── */
            .hero-features {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                border-top: 1px solid rgba(255, 255, 255, 0.08);
                position: relative;
                z-index: 1;
            }
            .hero-feature {
                padding: 2rem 2rem;
                border-right: 1px solid rgba(255, 255, 255, 0.08);
                position: relative;
            }
            .hero-feature:last-child {
                border-right: none;
            }
            .hero-feature-num {
                position: absolute;
                top: 1.5rem;
                right: 1.5rem;
                font-size: 2rem;
                font-weight: 700;
                color: rgba(255, 255, 255, 0.18);
                font-family: "IBM Plex Mono", monospace;
                line-height: 1;
            }
            .hero-feature-icon {
                width: 52px;
                height: 52px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 1rem;
            }
            .hero-feature-icon.fi-green {
                background: rgba(34, 197, 94, 0.18);
                color: #4ade80;
            }
            .hero-feature-icon.fi-teal {
                background: rgba(20, 184, 166, 0.18);
                color: #2dd4bf;
            }
            .hero-feature-icon.fi-orange {
                background: rgba(251, 146, 60, 0.18);
                color: #fb923c;
            }
            .hero-feature-icon svg {
                width: 22px;
                height: 22px;
            }
            .hero-feature-name {
                font-family: "Hind Siliguri", sans-serif;
                font-size: 1.25rem;
                font-weight: 700;
                color: #fff;
                margin: 0 0 0.15rem;
            }
            .hero-feature-sub {
                font-size: 0.72rem;
                font-weight: 600;
                letter-spacing: 0.1em;
                color: rgba(255, 255, 255, 0.35);
                text-transform: uppercase;
                margin: 0 0 0.5rem;
            }
            .hero-feature-desc {
                font-size: 0.82rem;
                color: rgba(255, 255, 255, 0.5);
                margin: 0;
            }

            /* responsive */
            @media (max-width: 768px) {
                .hero-split {
                    grid-template-columns: 1fr;
                    text-align: center;
                }
                .hero-logo-card {
                    display: none;
                }
                .hero-pill {
                    margin: 0 auto;
                }
                .hero-quote {
                    border-left: none;
                    border-top: 2px solid rgba(34, 197, 94, 0.4);
                    padding: 0.75rem 0 0;
                }
                .hero-btns {
                    justify-content: center;
                }
                .hero-features {
                    grid-template-columns: 1fr;
                }
                .hero-feature {
                    border-right: none;
                    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
                }
                .hero-feature:last-child {
                    border-bottom: none;
                }
            }

            @media (max-width: 600px) {
                #loginBtn {
                    padding: 0.3rem 0.55rem;
                    font-size: 0.74rem;
                }
                .pa-name {
                    display: none;
                }
                .pa-btn {
                    padding: 0.27rem 0.4rem;
                }
            }

            /* SEARCH MODAL */
            .srch-modal-box {
                position: relative;
                background: rgba(4, 12, 40, 0.97);
                backdrop-filter: blur(32px);
                -webkit-backdrop-filter: blur(32px);
                border: 1px solid rgba(110, 170, 158, 0.2);
                border-radius: 18px;
                width: 100%;
                max-width: 720px;
                max-height: 85vh;
                display: flex;
                flex-direction: column;
                box-shadow:
                    0 24px 80px rgba(0, 0, 0, 0.8),
                    0 0 0 1px rgba(255, 255, 255, 0.04);
            }
            .srch-hd {
                display: flex;
                align-items: center;
                gap: 0.65rem;
                padding: 1rem 1.1rem;
                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            }
            .srch-input-wrap {
                flex: 1;
                display: flex;
                align-items: center;
                background: rgba(255, 255, 255, 0.06);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 10px;
                padding: 0.48rem 0.8rem;
                gap: 0.5rem;
                transition: var(--trans);
            }
            .srch-input-wrap:focus-within {
                border-color: rgba(110, 200, 183, 0.5);
                background: rgba(255, 255, 255, 0.08);
                box-shadow: 0 0 0 3px rgba(110, 200, 183, 0.16);
            }
            .srch-input-wrap svg {
                flex-shrink: 0;
                color: rgba(255, 255, 255, 0.3);
            }
            .srch-input-wrap input {
                flex: 1;
                background: none;
                border: none;
                outline: none;
                color: #fff;
                font-size: 0.95rem;
                font-family: inherit;
            }
            .srch-input-wrap input::placeholder {
                color: rgba(255, 255, 255, 0.25);
            }
            .srch-clr-btn {
                background: none;
                border: none;
                color: rgba(255, 255, 255, 0.35);
                cursor: pointer;
                font-size: 0.9rem;
                padding: 0;
                line-height: 1;
                transition: var(--trans);
            }
            .srch-clr-btn:hover {
                color: #fff;
            }
            .srch-close-btn {
                background: rgba(255, 255, 255, 0.07);
                border: 1px solid rgba(255, 255, 255, 0.1);
                color: rgba(255, 255, 255, 0.5);
                width: 32px;
                height: 32px;
                border-radius: 9px;
                cursor: pointer;
                font-size: 0.85rem;
                transition: var(--trans);
            }
            .srch-close-btn:hover {
                color: #fff;
                background: rgba(255, 255, 255, 0.12);
            }
            .srch-filters {
                display: flex;
                flex-wrap: wrap;
                gap: 0.75rem 1.2rem;
                padding: 0.8rem 1.1rem;
                border-bottom: 1px solid rgba(255, 255, 255, 0.05);
                align-items: center;
            }
            .srch-filter-group {
                display: flex;
                align-items: center;
                gap: 0.45rem;
            }
            .srch-filter-label {
                font-size: 0.66rem;
                color: var(--txt2);
                text-transform: uppercase;
                letter-spacing: 0.7px;
                flex-shrink: 0;
                font-family: "IBM Plex Mono", monospace;
            }
            .srch-pills {
                display: flex;
                gap: 0.25rem;
            }
            .srch-pill {
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(255, 255, 255, 0.08);
                color: rgba(255, 255, 255, 0.5);
                padding: 0.2rem 0.6rem;
                border-radius: 20px;
                cursor: pointer;
                font-size: 0.74rem;
                font-family: inherit;
                transition: var(--trans);
            }
            .srch-pill:hover {
                color: rgba(255, 255, 255, 0.9);
                border-color: rgba(255, 255, 255, 0.25);
            }
            .srch-pill.active {
                background: rgba(110, 200, 183, 0.15);
                color: var(--aqua3);
                border-color: rgba(110, 200, 183, 0.5);
            }
            .srch-month-inp {
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(255, 255, 255, 0.09);
                border-radius: 8px;
                color: var(--txt);
                font-size: 0.77rem;
                font-family: inherit;
                padding: 0.24rem 0.5rem;
                outline: none;
                cursor: pointer;
                color-scheme: dark;
                transition: var(--trans);
            }
            .srch-month-inp:focus {
                border-color: rgba(110, 200, 183, 0.55);
            }

            /* Custom select dropdowns in search */
            .srch-custom-sel-wrap {
                position: relative;
            }
            .srch-custom-sel-btn {
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(255, 255, 255, 0.09);
                border-radius: 8px;
                color: var(--txt);
                font-size: 0.77rem;
                font-family: inherit;
                padding: 0.26rem 0.52rem 0.26rem 0.6rem;
                outline: none;
                cursor: pointer;
                display: flex;
                align-items: center;
                gap: 0.4rem;
                min-width: 80px;
                transition: var(--trans);
                white-space: nowrap;
            }
            .srch-custom-sel-btn:hover {
                border-color: rgba(110, 200, 183, 0.5);
                background: rgba(255, 255, 255, 0.08);
            }
            .srch-sel-arrow {
                font-size: 0.62rem;
                color: var(--txt2);
                margin-left: auto;
                transition: var(--trans);
            }
            .srch-custom-sel-dd {
                position: absolute;
                top: calc(100% + 4px);
                left: 0;
                min-width: 150px;
                background: rgba(4, 12, 40, 0.97);
                border: 1px solid rgba(110, 170, 158, 0.2);
                box-shadow: 0 10px 32px rgba(0, 0, 0, 0.65);
                backdrop-filter: blur(20px);
                overflow: hidden;
            }
            .srch-dd-item {
                display: flex;
                align-items: center;
                gap: 0.4rem;
                padding: 0.42rem 0.75rem;
                font-size: 0.78rem;
                color: var(--txt2);
                cursor: pointer;
                transition: var(--trans);
            }
            .srch-dd-item:hover {
                background: rgba(255, 255, 255, 0.07);
                color: var(--txt);
            }
            .srch-dd-active {
                color: var(--olive3);
                background: rgba(107, 140, 58, 0.1);
            }
            .srch-dd-active:hover {
                background: rgba(107, 140, 58, 0.15);
            }
            .srch-dd-tag-sel {
                color: var(--txt);
                background: rgba(77, 168, 224, 0.07);
            }
            .srch-dd-tag-sel:hover {
                background: rgba(77, 168, 224, 0.13);
            }
            .srch-dd-chk {
                font-size: 0.68rem;
                flex-shrink: 0;
            }
            .srch-dd-dot {
                width: 7px;
                height: 7px;
                border-radius: 50%;
                flex-shrink: 0;
            }
            /* Multi-tag chips inside the button */
            .srch-tag-chips-wrap {
                display: flex;
                flex-wrap: wrap;
                gap: 0.22rem;
                align-items: center;
                flex: 1;
                min-width: 0;
            }
            .srch-tag-chip {
                font-size: 0.68rem;
                padding: 0.1rem 0.38rem;
                border-radius: 20px;
                border: 1px solid rgba(255, 255, 255, 0.15);
                background: rgba(255, 255, 255, 0.06);
                color: rgba(255, 255, 255, 0.7);
                white-space: nowrap;
            }
            .srch-status {
                padding: 0.55rem 1.1rem;
                font-size: 0.74rem;
                color: var(--txt2);
                border-bottom: 1px solid rgba(255, 255, 255, 0.04);
            }
            .srch-results {
                flex: 1;
                overflow-y: auto;
                padding: 0.5rem 0.65rem;
            }
            .srch-empty {
                text-align: center;
                padding: 2.5rem;
                color: var(--txt2);
            }
            .srch-item {
                display: flex;
                gap: 0.8rem;
                padding: 0.65rem 0.55rem;
                border-radius: 10px;
                cursor: pointer;
                transition: var(--trans);
                border-bottom: 1px solid rgba(255, 255, 255, 0.03);
            }
            .srch-item:hover {
                background: rgba(255, 255, 255, 0.05);
            }
            .srch-item:last-child {
                border-bottom: none;
            }
            .srch-item-img {
                width: 70px;
                height: 70px;
                border-radius: 9px;
                background-size: cover;
                background-position: center;
                flex-shrink: 0;
            }
            .srch-item-body {
                flex: 1;
                min-width: 0;
            }
            .srch-item-meta {
                display: flex;
                align-items: center;
                gap: 0.4rem;
                margin-bottom: 0.25rem;
                flex-wrap: wrap;
            }
            .srch-item-time {
                font-size: 0.67rem;
                color: var(--txt2);
            }
            .srch-item-stat {
                font-size: 0.67rem;
                color: var(--txt2);
                display: inline-flex;
                align-items: center;
                gap: 0.25rem;
                line-height: 1;
            }
            .srch-item-title {
                font-family: "Amiri", serif;
                font-size: 1rem;
                color: var(--txt);
                font-weight: 700;
                margin-bottom: 0.2rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .srch-item-excerpt {
                font-size: 0.75rem;
                color: var(--txt2);
                line-height: 1.5;
                margin-bottom: 0.25rem;
            }
            .srch-item-tags {
                display: flex;
                flex-wrap: wrap;
                gap: 0.2rem;
                margin-bottom: 0.25rem;
            }
            .srch-item-author {
                display: flex;
                align-items: center;
                gap: 0.3rem;
                font-size: 0.7rem;
                color: var(--txt2);
            }
            .srch-item-author img {
                width: 16px;
                height: 16px;
                border-radius: 50%;
                object-fit: cover;
            }
            @media (max-width: 600px) {
                .srch-modal-box {
                    border-radius: 16px 16px 0 0;
                    max-height: 92vh;
                }
                #searchModal {
                    padding: 0;
                    align-items: flex-end !important;
                    padding-top: 0 !important;
                }
                .srch-filters {
                    gap: 0.5rem 0.75rem;
                    padding: 0.6rem 0.75rem;
                }
                .srch-filter-group {
                    gap: 0.3rem;
                }
                .srch-item-img {
                    width: 54px;
                    height: 54px;
                }
            }

            /* MAIN */
            main {
                max-width: 1200px;
                margin: 0 auto;
                padding: 1.8rem 1.5rem;
            }
            /* page body wrapper - everything below hero */
            .page-area {
                background: var(--bg);
            }
            [data-theme="light"] .page-area {
                background: var(--bg);
            }
            .sec-head {
                margin-bottom: 1rem;
            }
            .sec-label {
                font-family: "IBM Plex Mono", monospace;
                font-size: 0.72rem;
                font-weight: 600;
                letter-spacing: 0.12em;
                text-transform: uppercase;
                color: var(--aqua2);
                margin-bottom: 0.4rem;
            }
            .sec-title {
                font-family: "Hind Siliguri", sans-serif;
                font-size: clamp(2rem, 4vw, 3rem);
                color: #ffffff;
                display: block;
                font-weight: 700;
                line-height: 1.1;
                margin: 0;
            }
            .sec-title::before {
                display: none;
            }
            .sec-desc {
                font-family: "Hind Siliguri", sans-serif;
                font-size: 0.88rem;
                color: var(--txt2);
                margin: 0.35rem 0 0;
                font-weight: 400;
            }
            @media (max-width: 600px) {
                main {
                    padding: 1rem 0.75rem;
                }
                .modal {
                    padding: 0.5rem;
                }
                .mb {
                    border-radius: 12px;
                }
                .pmb,
                .creatmb {
                    max-width: 100%;
                }
            }

            /* GRID */
            .grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 1rem;
                align-items: start;
            }
            @media (max-width: 900px) {
                .grid {
                    grid-template-columns: repeat(2, 1fr);
                }
            }
            @media (max-width: 560px) {
                .grid {
                    grid-template-columns: 1fr;
                }
            }

            /* CARD */
            .card {
                background: linear-gradient(
                    160deg,
                    rgba(6, 16, 50, 0.92) 0%,
                    rgba(8, 22, 60, 0.88) 100%
                );
                border: 1px solid rgba(110, 170, 158, 0.22);
                border-radius: var(--r2);
                overflow: hidden;
                display: flex;
                flex-direction: column;
                cursor: pointer;
                transition:
                    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 0.28s,
                    border-color 0.28s;
                isolation: isolate;
                transform: translateZ(0);
                box-shadow:
                    0 4px 20px rgba(0, 10, 50, 0.5),
                    inset 0 1px 0 rgba(110, 200, 183, 0.08);
                position: relative;
                animation: fadeInUp 0.45s cubic-bezier(0.4, 0, 0.2, 1) both;
            }
            .card:nth-child(1) {
                animation-delay: 0.04s;
            }
            .card:nth-child(2) {
                animation-delay: 0.09s;
            }
            .card:nth-child(3) {
                animation-delay: 0.14s;
            }
            .card:nth-child(4) {
                animation-delay: 0.19s;
            }
            .card:nth-child(5) {
                animation-delay: 0.24s;
            }
            .card:nth-child(6) {
                animation-delay: 0.29s;
            }
            .card::before {
                content: "";
                position: absolute;
                inset: 0;
                border-radius: var(--r2);
                background: linear-gradient(
                    135deg,
                    rgba(110, 200, 183, 0.07) 0%,
                    transparent 55%
                );
                pointer-events: none;
                z-index: 0;
                transition: opacity 0.28s;
            }
            .card:hover {
                border-color: rgba(110, 200, 183, 0.6);
                transform: translateY(-6px) scale(1.005);
                box-shadow:
                    0 20px 50px rgba(5, 5, 25, 0.65),
                    0 0 0 1px rgba(110, 200, 183, 0.3),
                    0 0 40px rgba(110, 200, 183, 0.1);
            }
            .card:hover::before {
                opacity: 2.5;
            }
            .card-inner {
                padding: 0.85rem 0.9rem 0.5rem;
                position: relative;
                z-index: 1;
            }
            .card-meta-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 0.5rem;
            }
            .card-author-row {
                display: flex;
                align-items: center;
                gap: 0.4rem;
            }
            .card-av {
                width: 22px;
                height: 22px;
                border-radius: 50%;
                object-fit: cover;
                border: 1.5px solid rgba(110, 200, 183, 0.5);
            }
            .card-author {
                font-size: 0.71rem;
                color: var(--txt2);
            }
            .card-type-badge {
                font-size: 0.61rem;
                font-weight: 700;
                padding: 0.14rem 0.45rem;
                border-radius: 5px;
                letter-spacing: 0.4px;
                text-transform: uppercase;
            }
            .ct-recent {
                background: rgba(110, 200, 183, 0.1);
                color: var(--aqua3);
                border: 1px solid rgba(110, 200, 183, 0.28);
            }
            .ct-blog {
                background: rgba(0, 130, 255, 0.15);
                color: #80c4ff;
                border: 1px solid rgba(0, 130, 255, 0.25);
            }
            .ct-guideline {
                background: rgba(110, 170, 158, 0.12);
                color: var(--aqua2);
                border: 1px solid rgba(110, 170, 158, 0.28);
            }
            .card-title {
                font-family: "Amiri", serif;
                font-size: 1.07rem;
                color: var(--txt);
                line-height: 1.32;
                font-weight: 700;
                margin-bottom: 0.32rem;
            }
            .card-excerpt {
                font-size: 0.77rem;
                color: var(--txt2);
                line-height: 1.6;
                margin-bottom: 0.35rem;
            }
            .card-tags {
                display: flex;
                flex-wrap: wrap;
                gap: 0.25rem;
                margin-bottom: 0.35rem;
            }
            .post-tag {
                font-size: 0.67rem;
                color: rgba(77, 168, 224, 0.85);
                cursor: pointer;
                background: rgba(110, 170, 158, 0.08);
                padding: 0.1rem 0.4rem;
                border-radius: 4px;
                transition: var(--trans);
                border: 1px solid rgba(77, 168, 224, 0.15);
            }
            .post-tag:hover {
                background: rgba(77, 168, 224, 0.2);
                color: var(--sky3);
                border-color: rgba(77, 168, 224, 0.35);
            }

            /* Image area */
            .card-img-wrap {
                display: grid;
                grid-template-columns: 2fr 1fr;
                gap: 2px;
                background: var(--bg);
                aspect-ratio: 4/3;
                overflow: hidden;
                border-radius: 0;
            }
            .card-img-wrap.ci-single {
                grid-template-columns: 1fr;
                aspect-ratio: 16/9;
            }
            .card-img-wrap.ci-equal {
                grid-template-columns: 1fr 1fr;
            }
            .ci-full {
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
                width: 100%;
                height: 100%;
                background-color: #0a0f1e;
            }
            [data-theme="light"] .ci-full {
                background-color: #f0ede6;
            }
            .ci-main {
                background-size: cover;
                background-position: center;
                height: 100%;
            }
            .ci-side {
                display: flex;
                flex-direction: column;
                gap: 2px;
                height: 100%;
            }
            .ci-s1 {
                flex: 1;
                background-size: cover;
                background-position: center;
            }
            .ci-s1-full {
                flex: none;
                height: 100%;
                background-size: cover;
                background-position: center;
            }
            .ci-s2 {
                flex: 1;
                background-size: cover;
                background-position: center;
                position: relative;
                overflow: hidden;
            }
            .ci-blur-overlay {
                position: absolute;
                inset: 0;
                backdrop-filter: blur(6px);
                background: rgba(0, 0, 0, 0.3);
            }
            .ci-overlay {
                position: absolute;
                inset: 0;
                backdrop-filter: blur(4px);
                background: rgba(0, 0, 0, 0.55);
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-size: 1.2rem;
                font-weight: 700;
            }

            .card-footer-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0.42rem 0.9rem 0.32rem;
                font-size: 0.67rem;
                color: var(--txt2);
                position: relative;
                z-index: 1;
            }
            .card-date,
            .card-readtime {
                display: inline-flex;
                align-items: center;
                gap: 0.3rem;
                line-height: 1;
            }
            .card-date svg,
            .card-readtime svg {
                flex-shrink: 0;
            }

            /* Action bar */
            .cact {
                display: flex;
                border-top: 1px solid var(--brd);
                position: relative;
                z-index: 1;
            }
            .ca {
                flex: 1;
                background: none;
                border: none;
                border-right: 1px solid var(--brd);
                cursor: pointer;
                color: var(--txt2);
                font-size: 0.74rem;
                font-family: inherit;
                padding: 0.52rem 0.3rem;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0.3rem;
                transition: var(--trans);
                line-height: 1;
            }
            .ca svg {
                flex-shrink: 0;
            }
            .ca:last-child {
                border-right: none;
            }
            .ca:hover {
                background: rgba(255, 255, 255, 0.04);
                color: var(--txt);
            }
            .ca.cal {
                color: var(--sky2);
            }
            .ca.cas {
                color: var(--orange2);
            }
            .ca-del {
                color: var(--txt2);
            }
            .ca-del:hover {
                background: rgba(184, 48, 48, 0.12);
                color: var(--red);
            }
            [data-theme="light"] .ca-del {
                color: #3a3a3a;
            }
            [data-theme="light"] .ca-del:hover {
                background: rgba(180, 40, 40, 0.1);
                color: #c03030;
            }
            .ca-pin {
                color: var(--txt2);
            }
            .ca-pinned {
                color: var(--amber3) !important;
            }
            .ca-pin:hover {
                color: var(--amber3);
            }
            .pill-pin {
                background: rgba(212, 163, 73, 0.08);
                border: 1px solid rgba(212, 163, 73, 0.25);
                color: var(--amber3);
            }
            .pill-pin:hover {
                background: rgba(212, 163, 73, 0.18);
                border-color: rgba(212, 163, 73, 0.5);
            }
            .pill-pin-active {
                background: rgba(212, 163, 73, 0.2);
                border-color: rgba(212, 163, 73, 0.55);
                color: var(--amber3);
                font-weight: 700;
            }
            .pill-unpin {
                background: rgba(184, 48, 48, 0.08);
                border-color: rgba(184, 48, 48, 0.3);
                color: var(--red);
            }
            .pill-unpin:hover {
                background: rgba(184, 48, 48, 0.18);
                border-color: rgba(184, 48, 48, 0.55);
            }

            .shimmer {
                background: linear-gradient(
                    100deg,
                    var(--card) 25%,
                    rgba(40, 45, 165, 0.15) 50%,
                    var(--card) 75%
                );
                background-size: 200% 100%;
                animation: shimmerSlide 1.5s ease-in-out infinite;
                border-radius: var(--r2);
                height: 300px;
            }
            .empty {
                grid-column: 1/-1;
                text-align: center;
                padding: 3rem;
                color: var(--txt2);
            }
            #scrollSentinel {
                grid-column: 1/-1;
            }
            #loadMoreShimmer {
                grid-column: 1/-1;
            }

            /* ── FLOATING COMMENT BOX ── */
            #commentBox {
                display: none;
                position: fixed;
                bottom: 1.5rem;
                right: 1.5rem;
                width: 340px;
                max-height: 480px;
                background: linear-gradient(
                    160deg,
                    rgba(4, 12, 36, 0.97) 0%,
                    rgba(6, 16, 48, 0.96) 100%
                );
                backdrop-filter: blur(28px);
                -webkit-backdrop-filter: blur(28px);
                border: 1px solid rgba(110, 170, 158, 0.28);
                border-radius: 16px;
                box-shadow:
                    0 16px 48px rgba(0, 10, 60, 0.8),
                    0 0 0 1px rgba(110, 170, 158, 0.08);
                z-index: 500;
                flex-direction: column;
                overflow: hidden;
            }
            @media (max-width: 600px) {
                #commentBox {
                    left: 0;
                    right: 0;
                    bottom: 0;
                    width: 100%;
                    border-radius: 14px 14px 0 0;
                    max-height: 70vh;
                }
            }
            .cb-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0.7rem 1rem;
                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
                font-size: 0.84rem;
                font-weight: 500;
                background: rgba(255, 255, 255, 0.03);
            }
            .cb-close-btn {
                background: rgba(255, 255, 255, 0.07);
                border: 1px solid rgba(255, 255, 255, 0.14);
                color: rgba(255, 255, 255, 0.65);
                cursor: pointer;
                font-size: 0.85rem;
                width: 28px;
                height: 28px;
                border-radius: 7px;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: var(--trans);
                flex-shrink: 0;
            }
            .cb-close-btn:hover {
                background: rgba(255, 255, 255, 0.15);
                color: #fff;
            }
            .cmi-top {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 0.3rem;
            }
            .cmi-acts {
                display: flex;
                gap: 0.15rem;
                align-items: center;
                flex-shrink: 0;
            }
            .cm-act {
                background: none;
                border: none;
                cursor: pointer;
                font-size: 0.68rem;
                padding: 0.1rem 0.2rem;
                border-radius: 4px;
                opacity: 0.6;
                transition: var(--trans);
                line-height: 1;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                color: var(--txt2);
                font-weight: 600;
            }
            .cmi:hover .cm-act {
                opacity: 0.7;
            }
            .cm-act:hover {
                opacity: 1 !important;
                background: rgba(255, 255, 255, 0.08);
            }
            [data-theme="light"] .cm-act {
                color: var(--txt2);
            }
            [data-theme="light"] .cm-act:hover {
                background: rgba(0, 0, 0, 0.07);
                color: var(--txt);
            }
            .cm-pin.cm-pinned {
                opacity: 0.9 !important;
            }
            .cm-del:hover {
                background: rgba(184, 48, 48, 0.2) !important;
                color: #e74c3c;
            }
            .cm-rep:hover {
                background: rgba(224, 120, 32, 0.15) !important;
                color: var(--orange);
            }
            /* cm-pin-badge moved above */
            .cmi-pinned .cmi-bubble {
                background: linear-gradient(
                    135deg,
                    rgba(110, 200, 183, 0.12) 0%,
                    rgba(110, 170, 158, 0.06) 100%
                );
                border: 1px solid rgba(110, 200, 183, 0.35);
                border-left: 3px solid var(--aqua2);
                box-shadow:
                    0 0 18px rgba(110, 200, 183, 0.12),
                    inset 0 0 12px rgba(110, 200, 183, 0.04);
                animation: pinnedPulse 3s ease-in-out infinite;
                position: relative;
            }
            .cmi-pinned::before {
                content: "";
                position: absolute;
                inset: 0;
                border-radius: inherit;
                background: linear-gradient(
                    135deg,
                    rgba(110, 200, 183, 0.06) 0%,
                    transparent 60%
                );
                pointer-events: none;
            }
            @keyframes pinnedPulse {
                0%,
                100% {
                    box-shadow:
                        0 0 12px rgba(110, 200, 183, 0.1),
                        inset 0 0 8px rgba(110, 200, 183, 0.03);
                }
                50% {
                    box-shadow:
                        0 0 24px rgba(110, 200, 183, 0.22),
                        inset 0 0 14px rgba(110, 200, 183, 0.07);
                }
            }
            .cm-pin-badge {
                display: inline-flex;
                align-items: center;
                gap: 0.22rem;
                background: rgba(110, 200, 183, 0.15);
                border: 1px solid rgba(110, 200, 183, 0.35);
                border-radius: 20px;
                padding: 0.08rem 0.38rem;
                font-size: 0.62rem;
                font-weight: 600;
                color: var(--aqua3);
                letter-spacing: 0.02em;
                vertical-align: middle;
                margin-right: 0.3rem;
                box-shadow: 0 0 6px rgba(110, 200, 183, 0.2);
            }
            [data-theme="light"] .cmi-pinned {
                background: linear-gradient(
                    135deg,
                    rgba(110, 200, 183, 0.08) 0%,
                    rgba(212, 163, 73, 0.04) 100%
                );
                border-color: rgba(110, 200, 183, 0.4);
                border-left-color: var(--aqua2);
            }
            [data-theme="light"] .cm-pin-badge {
                background: rgba(110, 200, 183, 0.12);
                border-color: rgba(110, 200, 183, 0.3);
                color: #2a8a7a;
            }
            .cmt-blocked {
                color: var(--red, #e74c3c) !important;
            }
            .cb-list {
                flex: 1;
                overflow-y: auto;
                padding: 0.7rem;
                min-height: 80px;
                max-height: 320px;
            }
            .cb-form {
                display: flex;
                gap: 0.4rem;
                align-items: center;
                padding: 0.6rem;
                border-top: 1px solid rgba(255, 255, 255, 0.06);
            }
            .cb-form img {
                width: 26px;
                height: 26px;
                border-radius: 50%;
                object-fit: cover;
                flex-shrink: 0;
            }
            .cb-form input {
                flex: 1;
                background: rgba(255, 255, 255, 0.07);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 20px;
                padding: 0.38rem 0.75rem;
                color: #fff;
                font-size: 0.8rem;
                font-family: inherit;
                outline: none;
                transition: var(--trans);
            }
            .cb-form input:focus {
                border-color: rgba(110, 200, 183, 0.55);
            }
            .cb-form button {
                background: var(--amber2);
                color: #0a0f1a;
                border: none;
                padding: 0.38rem 0.72rem;
                border-radius: 20px;
                cursor: pointer;
                font-size: 0.85rem;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: var(--trans);
            }
            .cb-form button:hover {
                background: var(--amber3);
            }
            [data-theme="light"] #commentBox {
                background: #ffffff;
                border: 1px solid rgba(212, 163, 73, 0.25);
                box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
            }
            [data-theme="light"] .cb-header {
                background: rgba(212, 163, 73, 0.05);
                border-bottom: 1px solid rgba(0, 0, 0, 0.07);
                color: var(--txt);
            }
            [data-theme="light"] .cb-close-btn {
                background: rgba(0, 0, 0, 0.06);
                border-color: rgba(0, 0, 0, 0.1);
                color: var(--txt2);
            }
            [data-theme="light"] .cb-form {
                border-top: 1px solid rgba(0, 0, 0, 0.07);
            }
            [data-theme="light"] .cb-form input {
                background: rgba(0, 0, 0, 0.04);
                border: 1px solid rgba(0, 0, 0, 0.1);
                color: var(--txt);
            }
            [data-theme="light"] .cb-form input::placeholder {
                color: var(--txt3);
            }
            [data-theme="light"] .cb-form input:focus {
                border-color: rgba(212, 163, 73, 0.6);
            }
            [data-theme="light"] .cb-list .cmt-h {
                color: var(--txt3);
            }
            [data-theme="light"] .cmi {
                background: rgba(0, 0, 0, 0.02);
                border-color: rgba(0, 0, 0, 0.06);
            }
            [data-theme="light"] .cmi strong {
                color: var(--txt);
            }
            [data-theme="light"] .cmi p {
                color: var(--txt2);
            }

            /* ── MODALS ── */
            .modal {
                display: none;
                position: fixed;
                inset: 0;
                z-index: 1000;
                align-items: center;
                justify-content: center;
                padding: 1rem;
            }
            .mo {
                position: absolute;
                inset: 0;
                background: rgba(0, 0, 0, 0.85);
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
            }
            .mb {
                position: relative;
                background: linear-gradient(
                    160deg,
                    rgba(4, 14, 40, 0.98) 0%,
                    rgba(6, 18, 50, 0.97) 100%
                );
                border: 1px solid rgba(110, 170, 158, 0.22);
                border-radius: var(--r2);
                width: 100%;
                max-height: 90vh;
                overflow-y: auto;
                box-shadow:
                    0 24px 80px rgba(0, 10, 60, 0.9),
                    0 0 0 1px rgba(110, 170, 158, 0.08);
            }
            .mcl {
                position: sticky;
                top: 0.55rem;
                float: right;
                margin: 0.55rem 0.55rem 0 0;
                background: rgba(255, 255, 255, 0.07);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 8px;
                color: rgba(255, 255, 255, 0.45);
                width: 28px;
                height: 28px;
                cursor: pointer;
                font-size: 0.85rem;
                transition: var(--trans);
            }
            .mcl:hover {
                color: #fff;
                background: rgba(255, 255, 255, 0.14);
            }

            /* Post modal */
            .pmb {
                max-width: 640px;
            }
            .pm-img-single {
                height: 290px;
                background-size: cover;
                background-position: center;
                cursor: pointer;
                position: relative;
                overflow: hidden;
                border-radius: 12px;
                margin-top: 0.9rem;
                transition: filter 0.2s;
            }
            .pm-img-single:hover {
                filter: brightness(1.08);
            }
            .pm-img-hover {
                position: absolute;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(0, 0, 0, 0.3);
                opacity: 0;
                transition: opacity 0.2s;
                pointer-events: none;
            }
            .pm-img-single:hover .pm-img-hover {
                opacity: 1;
            }
            .pm-gallery {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
                gap: 4px;
                border-radius: 12px;
                overflow: hidden;
                margin-top: 0.9rem;
            }
            .pm-gimg {
                height: 148px;
                background-size: cover;
                background-position: center;
                cursor: pointer;
                transition: all 0.2s;
                position: relative;
                overflow: hidden;
            }
            .pm-gimg:hover {
                filter: brightness(1.1);
            }
            .pm-gimg-hover {
                position: absolute;
                inset: 0;
                background: rgba(0, 0, 0, 0.3);
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                transition: opacity 0.2s;
                pointer-events: none;
            }
            .pm-gimg:hover .pm-gimg-hover {
                opacity: 1;
            }
            .pm-bd {
                padding: 1.3rem;
            }
            .pm-meta {
                display: flex;
                align-items: center;
                gap: 0.6rem;
                margin-bottom: 0.6rem;
                font-size: 0.76rem;
                color: var(--txt2);
            }
            .pm-title {
                font-family: "Amiri", serif;
                font-size: 1.65rem;
                color: var(--txt);
                margin-bottom: 0.5rem;
                line-height: 1.3;
            }
            .pm-auth {
                display: flex;
                align-items: center;
                gap: 0.4rem;
                font-size: 0.77rem;
                color: var(--txt2);
                margin-bottom: 0.85rem;
            }
            .pm-auth img {
                width: 24px;
                height: 24px;
                border-radius: 50%;
                object-fit: cover;
            }
            .pm-rb {
                background: rgba(110, 200, 183, 0.12);
                color: var(--aqua3);
                font-size: 0.61rem;
                padding: 0.08rem 0.42rem;
                border-radius: 5px;
                margin-left: 0.2rem;
            }
            .pm-txt {
                color: var(--txt);
                line-height: 1.85;
                font-size: 0.88rem;
                white-space: pre-wrap;
            }
            .pm-acts {
                display: flex;
                gap: 0.5rem;
                margin: 0.85rem 0 0.6rem;
                flex-wrap: wrap;
            }
            .pill {
                background: rgba(110, 170, 158, 0.08);
                border: 1px solid rgba(110, 170, 158, 0.2);
                color: rgba(100, 160, 255, 0.8);
                padding: 0.34rem 0.9rem;
                border-radius: 20px;
                cursor: pointer;
                font-size: 0.77rem;
                font-family: inherit;
                transition: var(--trans);
                display: inline-flex;
                align-items: center;
                gap: 0.35rem;
            }
            .pill:hover,
            .pill.pla,
            .pill.psa {
                background: rgba(110, 200, 183, 0.15);
                color: var(--aqua3);
                border-color: rgba(110, 200, 183, 0.45);
            }
            .pill-del {
                color: rgba(220, 80, 80, 0.8) !important;
                border-color: rgba(220, 80, 80, 0.2) !important;
            }
            .pill-del:hover {
                background: rgba(184, 48, 48, 0.15) !important;
                color: #e05c5c !important;
                border-color: rgba(184, 48, 48, 0.4) !important;
            }
            [data-theme="light"] .pill-del {
                color: #c03030 !important;
                border-color: rgba(180, 40, 40, 0.2) !important;
            }
            [data-theme="light"] .pill-del:hover {
                background: rgba(180, 40, 40, 0.1) !important;
                color: #b83030 !important;
                border-color: rgba(180, 40, 40, 0.35) !important;
            }
            [data-theme="light"] .pill {
                background: rgba(0, 0, 0, 0.05);
                border-color: rgba(0, 0, 0, 0.14);
                color: var(--txt2);
            }
            [data-theme="light"] .pill:hover,
            [data-theme="light"] .pill.pla,
            [data-theme="light"] .pill.psa {
                background: rgba(212, 163, 73, 0.12);
                color: var(--olive);
                border-color: rgba(212, 163, 73, 0.5);
            }
            .cmw {
                border-top: 1px solid var(--brd);
                padding-top: 0.85rem;
                margin-top: 0.85rem;
            }
            .cmw h4 {
                font-size: 0.72rem;
                color: var(--txt2);
                text-transform: uppercase;
                letter-spacing: 1px;
                margin-bottom: 0.55rem;
                font-family: "IBM Plex Mono", monospace;
            }
            /* ── Facebook-style comment tree ── */
            .cmi-thread {
                margin-bottom: 0.5rem;
            }
            .cmi {
                display: flex;
                gap: 0.45rem;
                align-items: flex-start;
            }
            .cmi-body {
                display: flex;
                flex-direction: column;
                gap: 0.18rem;
                min-width: 0;
            }
            .cmi-bubble {
                background: rgba(255, 255, 255, 0.06);
                border-radius: 0 12px 12px 12px;
                padding: 0.38rem 0.62rem;
                display: inline-block;
                max-width: 100%;
            }
            [data-theme="light"] .cmi-bubble {
                background: rgba(0, 0, 0, 0.06);
            }
            .cmi-name {
                font-size: 0.74rem;
                font-weight: 700;
                color: var(--txt);
                display: block;
                margin-bottom: 0.1rem;
            }
            .cmi-bubble p {
                font-size: 0.78rem;
                color: var(--txt2);
                margin: 0;
                line-height: 1.45;
                white-space: pre-wrap;
                word-break: break-word;
            }
            [data-theme="light"] .cmi-bubble p {
                color: var(--txt);
            }
            .cmi-meta {
                display: flex;
                align-items: center;
                gap: 0.3rem;
                padding-left: 0.1rem;
            }
            .cmt {
                font-size: 0.64rem;
                color: var(--txt3);
            }
            /* Reply thread lines */
            .cmi-replies {
                margin-left: 18px;
                padding-left: 10px;
                border-left: 2px solid rgba(255, 255, 255, 0.1);
                margin-top: 0.3rem;
                /* display toggled by JS toggleReplies() — do NOT add display:flex here */
                flex-direction: column;
                gap: 0.3rem;
            }
            [data-theme="light"] .cmi-replies {
                border-left-color: rgba(0, 0, 0, 0.12);
            }
            /* Reply chip */
            .reply-chip {
                display: flex;
                align-items: center;
                gap: 0.4rem;
                background: rgba(58, 143, 196, 0.1);
                border: 1px solid rgba(58, 143, 196, 0.22);
                border-radius: 8px;
                padding: 0.25rem 0.55rem;
                margin-bottom: 0.3rem;
                font-size: 0.74rem;
                color: var(--sky2);
            }
            .reply-chip button {
                background: none;
                border: none;
                color: var(--sky2);
                cursor: pointer;
                font-size: 0.8rem;
                margin-left: auto;
                opacity: 0.7;
            }
            .reply-chip button:hover {
                opacity: 1;
            }
            /* Reply button */
            .reply-btn {
                background: none;
                border: none;
                color: var(--sky2);
                font-size: 0.68rem;
                cursor: pointer;
                padding: 0.08rem 0.2rem;
                border-radius: 4px;
                font-weight: 600;
                opacity: 0.8;
                transition: var(--trans);
            }
            .reply-btn:hover {
                opacity: 1;
                text-decoration: underline;
            }
            .cmi-mention {
                font-size: 0.72rem;
                color: var(--sky2);
                font-weight: 600;
                margin-bottom: 0.1rem;
                display: block;
            }
            .view-replies-btn {
                background: none;
                border: none;
                color: var(--txt2);
                font-size: 0.7rem;
                cursor: pointer;
                padding: 0.15rem 0;
                display: inline-flex;
                align-items: center;
                gap: 0.28rem;
                font-weight: 600;
                opacity: 0.75;
                transition: var(--trans);
                margin-top: 0.18rem;
                margin-left: 36px;
            }
            .view-replies-btn:hover {
                opacity: 1;
                color: var(--txt);
            }
            [data-theme="light"] .view-replies-btn {
                color: var(--txt2);
            }
            .pm-acts {
                display: flex;
                gap: 0.5rem;
                margin: 0.85rem 0 0.6rem;
                flex-wrap: wrap;
            }
            .cmf {
                display: flex;
                gap: 0.38rem;
                align-items: center;
                margin-top: 0.6rem;
            }
            .cmf img {
                width: 24px;
                height: 24px;
                border-radius: 50%;
                flex-shrink: 0;
            }
            .cmf input {
                flex: 1;
                background: rgba(255, 255, 255, 0.06);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 8px;
                padding: 0.4rem 0.65rem;
                color: var(--txt);
                font-size: 0.78rem;
                font-family: inherit;
                outline: none;
                transition: var(--trans);
            }
            [data-theme="light"] .cmf input {
                background: rgba(0, 0, 0, 0.05);
                border-color: rgba(0, 0, 0, 0.12);
            }
            .cmf input:focus {
                border-color: rgba(110, 200, 183, 0.55);
            }
            .cmf button {
                background: var(--blue2);
                color: #fff;
                border: none;
                padding: 0.4rem 0.75rem;
                border-radius: 8px;
                cursor: pointer;
                font-size: 0.78rem;
                font-family: inherit;
                transition: var(--trans);
            }
            .cmf button:hover {
                background: var(--blue3);
            }
            .cmt-h {
                color: var(--txt2);
                font-size: 0.78rem;
                text-align: center;
                padding: 0.4rem 0;
            }

            /* Create modal */
            .creatmb {
                max-width: 540px;
                padding: 1.4rem;
            }
            .creatmb h2 {
                font-family: "Amiri", serif;
                font-size: 1.3rem;
                background: linear-gradient(100deg, var(--blue3), var(--sky3));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                margin-bottom: 1rem;
            }
            .fg {
                margin-bottom: 0.8rem;
                position: relative;
            }
            .fg label {
                display: block;
                font-size: 0.68rem;
                color: var(--txt2);
                margin-bottom: 0.28rem;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                font-family: "IBM Plex Mono", monospace;
            }
            .fg input[type="datetime-local"] {
                color-scheme: dark;
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 9px;
                padding: 0.5rem 0.68rem;
                color: var(--txt);
                font-size: 0.85rem;
                font-family: inherit;
                outline: none;
                transition: var(--trans);
            }
            .fg input[type="datetime-local"]:focus {
                border-color: rgba(110, 200, 183, 0.55);
                box-shadow: 0 0 0 3px rgba(110, 200, 183, 0.1);
            }
            .fg input,
            .fg select,
            .fg textarea {
                width: 100%;
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 9px;
                padding: 0.5rem 0.68rem;
                color: var(--txt);
                font-size: 0.85rem;
                font-family: inherit;
                outline: none;
                transition: var(--trans);
            }
            [data-theme="light"] .fg input,
            [data-theme="light"] .fg select,
            [data-theme="light"] .fg textarea {
                background: rgba(0, 0, 0, 0.04);
                border-color: rgba(0, 0, 0, 0.12);
            }
            [data-theme="light"] .fg input[type="datetime-local"] {
                background: rgba(0, 0, 0, 0.04);
                border-color: rgba(0, 0, 0, 0.12);
            }
            .fg input:focus,
            .fg select:focus,
            .fg textarea:focus {
                border-color: rgba(110, 200, 183, 0.55);
                box-shadow: 0 0 0 3px rgba(110, 200, 183, 0.1);
            }
            .fg textarea {
                resize: vertical;
                min-height: 100px;
                line-height: 1.65;
            }
            .fg select option {
                background: #0a1810;
            }
            [data-theme="light"] .fg select option {
                background: #ffffff;
                color: #1a1a1a;
            }
            .tag-hint {
                font-size: 0.67rem;
                color: var(--txt2);
                margin-top: 0.2rem;
            }
            .tag-suggest-box {
                position: absolute;
                background: rgba(4, 12, 40, 0.97);
                border: 1px solid rgba(110, 170, 158, 0.2);
                border-radius: 9px;
                z-index: 10;
                width: 100%;
                max-height: 140px;
                overflow-y: auto;
                backdrop-filter: blur(16px);
            }
            .tag-sug {
                padding: 0.4rem 0.7rem;
                font-size: 0.8rem;
                color: var(--sky2);
                cursor: pointer;
                transition: var(--trans);
            }
            .tag-sug:hover {
                background: rgba(255, 255, 255, 0.06);
            }

            /* Tag Picker */
            .tag-picker-wrap {
                position: relative;
            }
            .tag-chips-row {
                display: flex;
                flex-wrap: wrap;
                gap: 0.3rem;
                min-height: 0;
                margin-bottom: 0.3rem;
            }
            .tag-chip {
                display: inline-flex;
                align-items: center;
                gap: 0.25rem;
                background: rgba(77, 168, 224, 0.15);
                border: 1px solid rgba(77, 168, 224, 0.3);
                color: var(--sky2);
                font-size: 0.74rem;
                padding: 0.15rem 0.45rem 0.15rem 0.55rem;
                border-radius: 20px;
            }
            .tag-chip button {
                background: none;
                border: none;
                color: var(--sky2);
                cursor: pointer;
                font-size: 0.85rem;
                line-height: 1;
                padding: 0;
                opacity: 0.65;
            }
            .tag-chip button:hover {
                opacity: 1;
            }
            .tag-picker-input-row {
                display: flex;
                gap: 0.3rem;
            }
            .tag-picker-input-row input {
                flex: 1;
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 9px;
                padding: 0.5rem 0.68rem;
                color: var(--txt);
                font-size: 0.85rem;
                font-family: inherit;
                outline: none;
                transition: var(--trans);
            }
            .tag-picker-input-row input:focus {
                border-color: rgba(110, 200, 183, 0.55);
            }
            .tag-dropdown-btn {
                background: rgba(110, 200, 183, 0.1);
                border: 1px solid rgba(110, 200, 183, 0.35);
                border-radius: 9px;
                color: var(--aqua3);
                padding: 0.5rem 0.75rem;
                cursor: pointer;
                font-size: 0.82rem;
                font-weight: 600;
                transition: var(--trans);
                display: flex;
                align-items: center;
                gap: 0.3rem;
            }
            .tag-dropdown-btn:hover {
                background: rgba(110, 200, 183, 0.18);
                border-color: rgba(110, 200, 183, 0.6);
                color: var(--aqua4);
            }
            .tag-dropdown-box {
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                margin-top: 4px;
                background: rgba(4, 12, 40, 0.97);
                border: 1px solid rgba(110, 170, 158, 0.2);
                border-radius: 10px;
                z-index: 50;
                max-height: 220px;
                overflow-y: auto;
                box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
                backdrop-filter: blur(20px);
            }
            .tag-dd-item {
                display: flex;
                align-items: center;
                gap: 0.4rem;
                padding: 0.42rem 0.72rem;
                font-size: 0.8rem;
                color: var(--txt2);
                cursor: pointer;
                transition: var(--trans);
            }
            .tag-dd-item:hover {
                background: rgba(255, 255, 255, 0.06);
                color: var(--txt);
            }
            .tag-dd-dot {
                width: 7px;
                height: 7px;
                border-radius: 50%;
                flex-shrink: 0;
                opacity: 0.8;
            }
            .tag-dd-label {
                flex: 1;
                min-width: 0;
            }
            .tag-dd-actions {
                display: flex;
                align-items: center;
                gap: 0.18rem;
                flex-shrink: 0;
                margin-left: auto;
            }
            .tag-dd-sel {
                background: rgba(58, 143, 196, 0.06);
            }
            .tag-dd-sel:hover {
                background: rgba(58, 143, 196, 0.12);
            }
            .tag-dd-check {
                font-size: 0.7rem;
                opacity: 0.9;
            }
            .tag-dd-new {
                padding: 0.44rem 0.8rem;
                font-size: 0.78rem;
                color: var(--olive3);
                cursor: pointer;
                border-bottom: 1px solid rgba(255, 255, 255, 0.05);
                transition: var(--trans);
            }
            .tag-dd-new:hover {
                background: rgba(107, 140, 58, 0.08);
            }
            .tag-dd-empty {
                padding: 0.65rem 0.8rem;
                font-size: 0.78rem;
                color: var(--txt2);
                text-align: center;
            }

            /* Tag action buttons — admin/maintainer only */
            .tag-color-btn,
            .tag-del-btn {
                background: none;
                border: none;
                cursor: pointer;
                font-size: 0.68rem;
                padding: 0.1rem 0.2rem;
                border-radius: 4px;
                opacity: 0.55;
                transition: var(--trans);
                line-height: 1;
            }
            .tag-color-btn:hover {
                opacity: 1 !important;
                background: rgba(77, 168, 224, 0.18);
            }
            .tag-del-btn:hover {
                opacity: 1 !important;
                background: rgba(184, 48, 48, 0.2);
                color: #e05c5c;
            }
            [data-theme="light"] .tag-color-btn,
            [data-theme="light"] .tag-del-btn {
                color: #1a1a1a;
                opacity: 0.6;
            }
            [data-theme="light"] .tag-color-btn:hover {
                color: #1a1a1a;
                background: rgba(0, 0, 0, 0.1);
            }
            [data-theme="light"] .tag-del-btn:hover {
                color: #c03030;
                background: rgba(180, 40, 40, 0.1);
            }

            /* Inline color picker */
            .tc-create-box {
                padding: 0.8rem 0.85rem;
            }
            .tc-create-tag-preview {
                display: inline-block;
                font-size: 0.82rem;
                font-weight: 600;
                border: 1px solid rgba(255, 255, 255, 0.15);
                border-radius: 20px;
                padding: 0.22rem 0.78rem;
                margin: 0.3rem 0 0.55rem;
                transition: var(--trans);
                color: var(--txt2);
                background: rgba(255, 255, 255, 0.06);
            }
            .tc-create-label {
                font-size: 0.65rem;
                color: var(--txt2);
                text-transform: uppercase;
                letter-spacing: 0.7px;
                font-family: "IBM Plex Mono", monospace;
            }
            .tc-swatches {
                display: flex;
                flex-wrap: wrap;
                gap: 0.35rem;
                margin: 0.48rem 0 0.72rem;
            }
            .tc-swatch {
                width: 24px;
                height: 24px;
                border-radius: 50%;
                border: 2px solid transparent;
                cursor: pointer;
                transition: var(--trans);
                outline: none;
                flex-shrink: 0;
            }
            .tc-swatch:hover {
                transform: scale(1.2);
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
            }
            .tc-swatch-active {
                border-color: #fff !important;
                transform: scale(1.2) !important;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
            }
            .tc-no-color {
                background: rgba(255, 255, 255, 0.08) !important;
                border: 1px dashed rgba(255, 255, 255, 0.3) !important;
                color: rgba(255, 255, 255, 0.45);
                font-size: 0.6rem;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .tc-no-color.tc-swatch-active {
                border-color: #fff !important;
                border-style: solid !important;
            }
            .tc-create-btns {
                display: flex;
                gap: 0.4rem;
            }
            .tc-cancel-btn {
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(255, 255, 255, 0.1);
                color: var(--txt2);
                padding: 0.32rem 0.7rem;
                border-radius: 7px;
                cursor: pointer;
                font-size: 0.76rem;
                font-family: inherit;
                transition: var(--trans);
            }
            .tc-cancel-btn:hover {
                background: rgba(255, 255, 255, 0.1);
                color: var(--txt);
            }
            .tc-confirm-btn {
                background: linear-gradient(135deg, var(--blue2), var(--blue));
                border: none;
                color: #fff;
                padding: 0.32rem 0.85rem;
                border-radius: 7px;
                cursor: pointer;
                font-size: 0.76rem;
                font-family: inherit;
                font-weight: 600;
                flex: 1;
                transition: var(--trans);
                box-shadow: 0 2px 8px rgba(107, 140, 58, 0.25);
            }
            .tc-confirm-btn:hover {
                background: linear-gradient(
                    135deg,
                    var(--olive3),
                    var(--olive2)
                );
                transform: translateY(-1px);
            }

            /* Image upload */
            .img-drop {
                border: 2px dashed rgba(255, 255, 255, 0.28);
                border-radius: 9px;
                padding: 1rem;
                text-align: center;
                color: var(--txt2);
                font-size: 0.78rem;
                cursor: pointer;
                position: relative;
                transition: var(--trans);
            }
            .img-drop:hover {
                border-color: rgba(110, 200, 183, 0.55);
                color: var(--aqua3);
            }
            .img-drop input {
                position: absolute;
                inset: 0;
                opacity: 0;
                cursor: pointer;
            }
            [data-theme="light"] .img-drop {
                border-color: rgba(0, 0, 0, 0.3);
                color: var(--txt2);
            }
            [data-theme="light"] .img-drop:hover {
                border-color: rgba(110, 170, 158, 0.7);
                color: var(--aqua);
            }
            .img-drop.drag-over {
                border-color: rgba(110, 200, 183, 0.9);
                background: rgba(110, 200, 183, 0.06);
                color: var(--aqua3);
            }
            #imgPrev {
                display: flex;
                gap: 6px;
                flex-wrap: wrap;
                margin-top: 0.4rem;
            }
            .sbrow {
                display: flex;
                gap: 0.5rem;
                margin-top: 0.95rem;
            }
            #submitBtn {
                background: linear-gradient(
                    135deg,
                    var(--orange2),
                    var(--orange)
                );
                color: #fff;
                border: none;
                padding: 0.52rem 1.15rem;
                border-radius: 9px;
                cursor: pointer;
                font-weight: 600;
                font-size: 0.84rem;
                font-family: inherit;
                flex: 1;
                box-shadow: 0 2px 12px rgba(201, 168, 76, 0.35);
                transition: var(--trans);
            }
            #submitBtn:hover {
                background: linear-gradient(
                    135deg,
                    var(--orange3),
                    var(--orange2)
                );
                transform: translateY(-1px);
            }
            #submitBtn:disabled {
                opacity: 0.45;
                cursor: not-allowed;
                transform: none;
            }
            .canbtn {
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(255, 255, 255, 0.1);
                color: var(--txt2);
                padding: 0.52rem 0.85rem;
                border-radius: 9px;
                cursor: pointer;
                font-family: inherit;
                transition: var(--trans);
            }
            .canbtn:hover {
                background: rgba(255, 255, 255, 0.09);
                color: var(--txt);
            }

            /* Profile modal */
            .profmb {
                max-width: 650px;
                padding: 1.4rem;
            }
            .ph {
                display: flex;
                gap: 0.85rem;
                align-items: center;
                margin-bottom: 1rem;
                padding-bottom: 0.9rem;
                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            }
            .pav {
                width: 54px;
                height: 54px;
                border-radius: 50%;
                border: 2px solid var(--aqua3);
                object-fit: cover;
                box-shadow: 0 0 12px rgba(110, 200, 183, 0.25);
            }
            .ph h2 {
                font-size: 1rem;
                color: var(--txt);
            }
            .ph p {
                font-size: 0.75rem;
                color: var(--txt2);
                margin: 0.12rem 0 0.35rem;
            }
            .role-badge {
                font-size: 0.65rem;
                padding: 0.14rem 0.5rem;
                border-radius: 20px;
                font-weight: 600;
            }
            /* ── MY POSTS TAB ── */
            .mp-badge {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-width: 16px;
                height: 16px;
                padding: 0 4px;
                background: var(--blue3);
                color: #fff;
                border-radius: 8px;
                font-size: 0.6rem;
                font-weight: 700;
                margin-left: 0.3rem;
                line-height: 1;
            }
            .mp-badge:empty {
                display: none;
            }
            .mpr {
                display: flex;
                flex-direction: column;
                gap: 0.28rem;
                padding: 0.6rem 0.7rem;
                border-radius: 9px;
                cursor: pointer;
                border: 1px solid var(--brd);
                background: var(--card2);
                margin-bottom: 0.4rem;
                transition: var(--trans);
            }
            .mpr:hover {
                border-color: rgba(110, 200, 183, 0.5);
                background: var(--card);
                transform: translateX(2px);
            }
            .mpr-main {
                display: flex;
                align-items: center;
                gap: 0.45rem;
                flex-wrap: wrap;
            }
            .mpr-title {
                font-size: 0.82rem;
                color: var(--txt);
                font-weight: 500;
                flex: 1;
                min-width: 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .mpr-type {
                font-size: 0.58rem;
                padding: 0.08rem 0.4rem;
                border-radius: 4px;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.4px;
                flex-shrink: 0;
            }
            .mpr-type.blog {
                background: rgba(110, 170, 158, 0.12);
                color: var(--aqua2);
            }
            .mpr-type.recent {
                background: rgba(110, 170, 158, 0.12);
                color: var(--aqua3);
            }
            .mpr-type.guideline {
                background: rgba(200, 90, 10, 0.15);
                color: var(--orange2);
            }
            .mpr-meta {
                display: flex;
                align-items: center;
                gap: 0.6rem;
                font-size: 0.65rem;
                color: var(--txt3);
                flex-wrap: wrap;
            }
            .mpr-meta span {
                display: inline-flex;
                align-items: center;
                gap: 0.22rem;
            }
            .mpr-tags {
                display: flex;
                gap: 0.25rem;
                margin-left: auto;
            }
            .mpr-pin-badge {
                display: inline-flex;
                align-items: center;
                gap: 0.22rem;
                font-size: 0.58rem;
                font-weight: 600;
                padding: 0.07rem 0.35rem;
                border-radius: 4px;
                background: rgba(245, 158, 11, 0.15);
                color: var(--amber3, #f59e0b);
                border: 1px solid rgba(245, 158, 11, 0.3);
                flex-shrink: 0;
            }
            .mpr-tag {
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 4px;
                padding: 0.05rem 0.32rem;
                font-size: 0.6rem;
                color: var(--txt3);
            }
            [data-theme="light"] .mpr-tag {
                background: rgba(0, 0, 0, 0.04);
                border-color: rgba(0, 0, 0, 0.1);
            }
            #mpSrch {
                width: 100%;
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 8px;
                padding: 0.35rem 0.65rem;
                color: var(--txt);
                font-size: 0.78rem;
                font-family: inherit;
                outline: none;
                margin-bottom: 0.6rem;
                transition: var(--trans);
            }
            #mpSrch:focus {
                border-color: rgba(110, 200, 183, 0.55);
                box-shadow: 0 0 0 2px rgba(110, 200, 183, 0.1);
            }
            [data-theme="light"] #mpSrch {
                background: rgba(0, 0, 0, 0.04);
                border-color: rgba(0, 0, 0, 0.12);
            }

            .ptabs {
                display: flex;
                gap: 0.2rem;
                margin-bottom: 0.9rem;
                border-bottom: 1px solid rgba(255, 255, 255, 0.05);
                padding-bottom: 0.38rem;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
            }
            .ptabs::-webkit-scrollbar {
                display: none;
            }
            .ptab {
                background: none;
                border: none;
                color: rgba(255, 255, 255, 0.45);
                padding: 0.3rem 0.68rem;
                border-radius: 8px;
                cursor: pointer;
                font-size: 0.77rem;
                font-family: inherit;
                transition: var(--trans);
                display: inline-flex;
                align-items: center;
                gap: 0.35rem;
                line-height: 1;
            }
            .ptab:hover {
                background: rgba(255, 255, 255, 0.06);
            }
            .ptab.active {
                background: rgba(110, 170, 158, 0.14);
                color: var(--aqua3);
            }
            .tc {
                display: none;
            }
            .tc.active {
                display: block;
            }
            .tab-lbl {
                font-size: 0.68rem;
                color: var(--txt2);
                text-transform: uppercase;
                letter-spacing: 0.6px;
                margin-bottom: 0.55rem;
                font-family: "IBM Plex Mono", monospace;
            }
            .spr {
                display: flex;
                justify-content: space-between;
                padding: 0.44rem 0.58rem;
                background: rgba(255, 255, 255, 0.04);
                border: 1px solid rgba(255, 255, 255, 0.05);
                border-radius: 8px;
                margin-bottom: 0.28rem;
                cursor: pointer;
                font-size: 0.77rem;
                color: var(--txt);
                transition: var(--trans);
            }
            .spr:hover {
                background: rgba(255, 255, 255, 0.08);
                border-color: rgba(255, 255, 255, 0.1);
            }
            .spd {
                color: var(--txt2);
                font-size: 0.67rem;
                flex-shrink: 0;
                margin-left: 0.35rem;
            }
            .mbh {
                display: flex;
                gap: 0.55rem;
                align-items: center;
                margin-bottom: 0.55rem;
            }
            .mbh input {
                flex: 1;
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(255, 255, 255, 0.09);
                border-radius: 8px;
                padding: 0.36rem 0.58rem;
                color: var(--txt);
                font-size: 0.76rem;
                outline: none;
                font-family: inherit;
                transition: var(--trans);
            }
            .mbh input:focus {
                border-color: rgba(110, 200, 183, 0.55);
            }
            .rfrow {
                display: flex;
                gap: 0.25rem;
                margin-bottom: 0.55rem;
                flex-wrap: wrap;
            }
            .rf {
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(255, 255, 255, 0.08);
                color: rgba(255, 255, 255, 0.45);
                padding: 0.2rem 0.58rem;
                border-radius: 20px;
                cursor: pointer;
                font-size: 0.7rem;
                font-family: inherit;
                transition: var(--trans);
            }
            .rf.active {
                background: rgba(110, 200, 183, 0.15);
                color: var(--aqua3);
                border-color: rgba(110, 200, 183, 0.4);
            }
            .mstats {
                display: flex;
                gap: 0.28rem;
                margin-bottom: 0.55rem;
                flex-wrap: wrap;
            }
            .msc {
                background: rgba(255, 255, 255, 0.04);
                border: 1px solid rgba(255, 255, 255, 0.06);
                border-radius: 7px;
                padding: 0.2rem 0.52rem;
                font-size: 0.7rem;
                color: var(--txt2);
            }
            .msc strong {
                color: var(--txt);
                margin-left: 0.15rem;
            }
            .mrow {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                padding: 0.44rem 0.4rem;
                border-radius: 9px;
                margin-bottom: 0.25rem;
                border: 1px solid rgba(255, 255, 255, 0.06);
                background: rgba(255, 255, 255, 0.03);
                flex-wrap: wrap;
                transition: var(--trans);
            }
            .mrow:hover {
                background: rgba(255, 255, 255, 0.05);
            }
            .mav {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 0.7rem;
                font-weight: 700;
                flex-shrink: 0;
            }
            .minf {
                flex: 1;
                min-width: 0;
            }
            .minf strong {
                display: block;
                font-size: 0.79rem;
                color: var(--txt);
            }
            .minf small {
                font-size: 0.67rem;
                color: var(--txt2);
            }
            .you {
                background: rgba(110, 200, 183, 0.12);
                color: var(--aqua3);
                font-size: 0.57rem;
                padding: 0.06rem 0.3rem;
                border-radius: 3px;
                margin-left: 0.2rem;
            }
            .rbtns {
                display: flex;
                gap: 0.2rem;
                flex-wrap: wrap;
            }
            .rb {
                background: none;
                border: 1px solid rgba(255, 255, 255, 0.09);
                color: rgba(255, 255, 255, 0.35);
                padding: 0.15rem 0.45rem;
                border-radius: 5px;
                cursor: pointer;
                font-size: 0.65rem;
                font-family: inherit;
                transition: var(--trans);
            }
            .rb.maintainer.rba,
            .rb.maintainer:hover {
                background: rgba(110, 200, 183, 0.14);
                color: var(--aqua3);
                border-color: rgba(110, 200, 183, 0.45);
            }
            .rb.admin.rba,
            .rb.admin:hover {
                background: rgba(224, 92, 92, 0.12);
                color: #e05c5c;
                border-color: rgba(224, 92, 92, 0.35);
            }
            .rb.user.rba,
            .rb.user:hover {
                background: rgba(136, 136, 136, 0.12);
                color: #aaa;
                border-color: rgba(136, 136, 136, 0.35);
            }
            .sirows {
                margin-bottom: 0.85rem;
            }
            .sir {
                display: flex;
                padding: 0.48rem 0;
                border-bottom: 1px solid rgba(255, 255, 255, 0.05);
                font-size: 0.79rem;
            }
            .sir label {
                color: var(--txt2);
                width: 115px;
                flex-shrink: 0;
            }
            .sir span {
                color: var(--txt);
            }
            .danger-btn {
                background: rgba(184, 48, 48, 0.1);
                color: #e05c5c;
                border: 1px solid rgba(184, 48, 48, 0.3);
                padding: 0.42rem 0.98rem;
                border-radius: 8px;
                cursor: pointer;
                font-size: 0.79rem;
                font-family: inherit;
                transition: var(--trans);
            }
            .danger-btn:hover {
                background: var(--red);
                color: #fff;
                border-color: var(--red);
            }

            /* ── PERMISSION CHART ── */
            .perm-wrap {
                padding-bottom: 0.5rem;
            }
            .perm-desc {
                font-size: 0.73rem;
                color: var(--txt2);
                margin-bottom: 0.9rem;
                line-height: 1.6;
            }
            .perm-section {
                margin-bottom: 1.1rem;
            }
            .perm-section-title {
                display: flex;
                align-items: center;
                gap: 0.4rem;
                font-size: 0.72rem;
                font-weight: 700;
                color: var(--aqua3);
                text-transform: uppercase;
                letter-spacing: 0.6px;
                margin-bottom: 0.45rem;
                font-family: "IBM Plex Mono", monospace;
            }
            .perm-table-wrap {
                overflow-x: auto;
                border-radius: 9px;
                border: 1px solid rgba(255, 255, 255, 0.07);
            }
            .perm-table {
                width: 100%;
                border-collapse: collapse;
                font-size: 0.72rem;
            }
            .perm-table thead tr {
                background: rgba(110, 200, 183, 0.06);
            }
            .perm-table th {
                padding: 0.38rem 0.5rem;
                text-align: center;
                font-size: 0.65rem;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.4px;
                color: var(--txt2);
                border-bottom: 1px solid rgba(255, 255, 255, 0.07);
                white-space: nowrap;
            }
            .perm-table th:first-child {
                text-align: left;
                padding-left: 0.7rem;
                width: 46%;
            }
            .perm-table td {
                padding: 0.32rem 0.5rem;
                text-align: center;
                border-bottom: 1px solid rgba(255, 255, 255, 0.04);
                color: var(--txt2);
            }
            .perm-table td:first-child {
                text-align: left;
                padding-left: 0.7rem;
                color: var(--txt);
                font-size: 0.73rem;
            }
            .perm-table tbody tr:last-child td {
                border-bottom: none;
            }
            .perm-table tbody tr:hover {
                background: rgba(255, 255, 255, 0.025);
            }
            .perm-table td.yes {
                color: #4ade80;
                font-size: 0.85rem;
                font-weight: 700;
            }
            .perm-table td.no {
                color: rgba(255, 255, 255, 0.2);
                font-size: 0.85rem;
            }
            .perm-table th.role-admin {
                color: #e05c5c;
            }
            .perm-table th.role-maint {
                color: var(--aqua3);
            }
            .perm-table th.role-user {
                color: #a8cc5a;
            }
            .perm-table th.role-blocked {
                color: #888;
            }
            .perm-table th.role-guest {
                color: rgba(255, 255, 255, 0.3);
            }
            [data-theme="light"] .perm-table-wrap {
                border-color: rgba(0, 0, 0, 0.1);
            }
            [data-theme="light"] .perm-table thead tr {
                background: rgba(0, 0, 0, 0.04);
            }
            [data-theme="light"] .perm-table th {
                color: #666;
                border-bottom-color: rgba(0, 0, 0, 0.09);
            }
            [data-theme="light"] .perm-table td {
                border-bottom-color: rgba(0, 0, 0, 0.05);
            }
            [data-theme="light"] .perm-table td:first-child {
                color: #1a1a1a;
            }
            [data-theme="light"] .perm-table td.yes {
                color: #16a34a;
            }
            [data-theme="light"] .perm-table td.no {
                color: rgba(0, 0, 0, 0.2);
            }
            [data-theme="light"] .perm-table tbody tr:hover {
                background: rgba(0, 0, 0, 0.02);
            }
            .perm-legend {
                display: flex;
                gap: 1rem;
                margin-top: 0.8rem;
                font-size: 0.7rem;
                color: var(--txt2);
                align-items: center;
            }
            .perm-leg-item {
                display: flex;
                align-items: center;
                gap: 0.3rem;
            }
            .pleg.yes {
                color: #4ade80;
                font-size: 0.8rem;
                font-weight: 700;
            }
            .pleg.no {
                color: rgba(255, 255, 255, 0.25);
                font-size: 0.8rem;
            }
            [data-theme="light"] .pleg.yes {
                color: #16a34a;
            }
            [data-theme="light"] .pleg.no {
                color: rgba(0, 0, 0, 0.2);
            }
            .perm-role-key {
                display: flex;
                gap: 0.35rem;
                flex-wrap: wrap;
                margin-top: 0.55rem;
            }
            .perm-role-key span {
                font-size: 0.63rem;
                padding: 0.12rem 0.45rem;
                border-radius: 20px;
                font-weight: 600;
            }
            .prk-admin {
                background: rgba(224, 92, 92, 0.12);
                color: #e05c5c;
                border: 1px solid rgba(224, 92, 92, 0.3);
            }
            .prk-maint {
                background: rgba(110, 200, 183, 0.12);
                color: var(--aqua3);
                border: 1px solid rgba(110, 200, 183, 0.3);
            }
            .prk-user {
                background: rgba(168, 204, 90, 0.1);
                color: #a8cc5a;
                border: 1px solid rgba(168, 204, 90, 0.3);
            }
            .prk-blocked {
                background: rgba(136, 136, 136, 0.1);
                color: #888;
                border: 1px solid rgba(136, 136, 136, 0.2);
            }
            .prk-guest {
                background: rgba(255, 255, 255, 0.05);
                color: rgba(255, 255, 255, 0.3);
                border: 1px solid rgba(255, 255, 255, 0.08);
            }
            [data-theme="light"] .prk-guest {
                background: rgba(0, 0, 0, 0.04);
                color: #888;
                border-color: rgba(0, 0, 0, 0.1);
            }

            /* ABOUT US & FOOTER */
            .about-section {
                background: linear-gradient(
                    160deg,
                    #070c18 0%,
                    #0f1a2e 35%,
                    #162238 65%,
                    #070c18 100%
                );
                border-top: 1px solid rgba(110, 170, 158, 0.25);
                padding: 3.5rem 2rem;
                text-align: center;
                position: relative;
                overflow: hidden;
            }
            .about-section::before {
                content: "";
                position: absolute;
                inset: 0;
                background:
                    radial-gradient(
                        ellipse at 50% 30%,
                        rgba(110, 200, 183, 0.1) 0%,
                        transparent 55%
                    ),
                    radial-gradient(
                        ellipse at 80% 80%,
                        rgba(110, 170, 158, 0.08) 0%,
                        transparent 50%
                    );
                pointer-events: none;
            }
            .about-section h3 {
                font-family: "Amiri", serif;
                font-size: 1.55rem;
                background: linear-gradient(
                    90deg,
                    var(--amber3),
                    #ffffff,
                    var(--aqua3)
                );
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                margin-bottom: 0.8rem;
            }
            .about-section p {
                color: rgba(180, 195, 210, 0.75);
                font-size: 0.84rem;
                max-width: 520px;
                margin: 0 auto 0.5rem;
                line-height: 1.8;
            }
            .about-btns {
                display: flex;
                justify-content: center;
                gap: 0.8rem;
                margin-top: 1.4rem;
                flex-wrap: wrap;
            }
            .about-btn-primary {
                display: inline-flex;
                align-items: center;
                gap: 0.4rem;
                background: linear-gradient(
                    135deg,
                    var(--amber),
                    var(--amber2)
                );
                color: #0a0f1a;
                border: none;
                padding: 0.58rem 1.5rem;
                border-radius: 9px;
                cursor: pointer;
                font-size: 0.87rem;
                font-family: inherit;
                font-weight: 600;
                text-decoration: none;
                box-shadow: 0 4px 16px rgba(110, 200, 183, 0.3);
                transition: var(--trans);
            }
            .about-btn-primary svg {
                flex-shrink: 0;
            }
            .about-btn-primary:hover {
                background: linear-gradient(135deg, var(--aqua2), var(--aqua3));
                transform: translateY(-2px);
                box-shadow: 0 8px 24px rgba(110, 200, 183, 0.45);
            }
            .about-btn-sec {
                display: inline-flex;
                align-items: center;
                gap: 0.4rem;
                background: rgba(110, 170, 158, 0.1);
                color: var(--aqua3);
                border: 1px solid rgba(110, 170, 158, 0.3);
                padding: 0.58rem 1.3rem;
                border-radius: 9px;
                cursor: pointer;
                font-size: 0.87rem;
                font-family: inherit;
                text-decoration: none;
                transition: var(--trans);
            }
            .about-btn-sec svg {
                flex-shrink: 0;
            }
            .about-btn-sec:hover {
                background: rgba(110, 200, 183, 0.18);
                border-color: rgba(110, 200, 183, 0.5);
                color: #fff;
            }
            footer {
                background: #070c18;
                border-top: 1px solid rgba(110, 170, 158, 0.18);
                padding: 1.4rem;
                text-align: center;
            }
            footer p {
                color: rgba(140, 155, 190, 0.55);
                font-size: 0.73rem;
                letter-spacing: 0.02em;
            }

            .rp-section-lbl {
                font-size: 0.67rem;
                color: var(--txt2);
                text-transform: uppercase;
                letter-spacing: 0.7px;
                padding: 0.3rem 0.2rem 0.4rem;
                margin-top: 0.3rem;
                font-family: "IBM Plex Mono", monospace;
            }
            .rp-section-resolved {
                color: var(--olive2);
                margin-top: 0.8rem;
            }
            .rp-resolved {
                opacity: 0.55;
                border-color: rgba(107, 140, 58, 0.15);
            }
            .rp-resolved .rp-text {
                background: rgba(0, 0, 0, 0.18);
            }
            .rp-resolved-badge {
                background: rgba(110, 200, 183, 0.1);
                color: var(--aqua3);
                font-size: 0.6rem;
                padding: 0.08rem 0.38rem;
                border-radius: 4px;
                font-weight: 600;
                margin-left: 0.3rem;
            }
            /* TOAST */
            .toast {
                position: fixed;
                bottom: 1.4rem;
                left: 50%;
                transform: translateX(-50%) translateY(150px);
                background: rgba(14, 26, 16, 0.95);
                backdrop-filter: blur(16px);
                -webkit-backdrop-filter: blur(16px);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 10px;
                padding: 0.5rem 1.1rem;
                font-size: 0.79rem;
                color: var(--txt);
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
                z-index: 10000;
                transition:
                    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.28s ease;
                white-space: nowrap;
                opacity: 0;
                pointer-events: none;
            }
            .toast.show {
                transform: translateX(-50%) translateY(0);
                opacity: 1;
                pointer-events: auto;
            }
            .toast.error {
                border-color: rgba(224, 92, 92, 0.4);
                color: #e05c5c;
            }
            .toast.success {
                border-color: rgba(110, 200, 183, 0.5);
                color: var(--aqua3);
            }

            /* REPORTS PANEL */
            .rp-row {
                background: rgba(255, 255, 255, 0.03);
                border: 1px solid rgba(255, 255, 255, 0.06);
                border-radius: 10px;
                padding: 0.68rem 0.75rem;
                margin-bottom: 0.5rem;
                transition: var(--trans);
            }
            .rp-comment {
                display: flex;
                gap: 0.58rem;
                margin-bottom: 0.55rem;
            }
            .rp-av {
                width: 28px;
                height: 28px;
                border-radius: 50%;
                object-fit: cover;
                flex-shrink: 0;
                border: 1px solid rgba(255, 255, 255, 0.08);
            }
            .rp-body {
                flex: 1;
                min-width: 0;
            }
            .rp-author {
                font-size: 0.77rem;
                font-weight: 600;
                color: var(--txt);
                margin-bottom: 0.18rem;
                display: flex;
                align-items: center;
                gap: 0.35rem;
                flex-wrap: wrap;
            }
            .rp-blocked-badge {
                background: rgba(184, 48, 48, 0.18);
                color: #e05c5c;
                font-size: 0.6rem;
                padding: 0.08rem 0.35rem;
                border-radius: 4px;
                font-weight: 600;
            }
            .rp-text {
                font-size: 0.79rem;
                color: var(--txt2);
                line-height: 1.55;
                background: rgba(0, 0, 0, 0.25);
                border-radius: 7px;
                padding: 0.38rem 0.52rem;
                margin-bottom: 0.25rem;
                word-break: break-word;
            }
            .rp-meta {
                font-size: 0.65rem;
                color: var(--txt2);
            }
            .rp-actions {
                display: flex;
                gap: 0.3rem;
                flex-wrap: wrap;
            }
            .rp-btn {
                background: rgba(255, 255, 255, 0.04);
                border: 1px solid rgba(255, 255, 255, 0.09);
                color: var(--txt2);
                padding: 0.25rem 0.6rem;
                border-radius: 7px;
                cursor: pointer;
                font-size: 0.72rem;
                font-family: inherit;
                transition: var(--trans);
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 0.3rem;
                line-height: 1;
            }
            .rp-btn:hover {
                color: #fff;
                border-color: rgba(255, 255, 255, 0.25);
            }
            .rp-del:hover {
                background: rgba(184, 48, 48, 0.18);
                color: #e05c5c;
                border-color: rgba(184, 48, 48, 0.35);
            }
            .rp-block:hover {
                background: rgba(184, 48, 48, 0.14);
                color: #e05c5c;
                border-color: rgba(184, 48, 48, 0.35);
            }
            .rp-unblock:hover {
                background: rgba(107, 140, 58, 0.14);
                color: var(--olive3);
                border-color: rgba(107, 140, 58, 0.35);
            }
            .rp-dismiss:hover {
                background: rgba(107, 140, 58, 0.1);
                color: var(--olive3);
            }

            /* ── PINNED POST ── */
            .card.card-pinned {
                border-color: rgba(212, 163, 73, 0.55);
                box-shadow:
                    0 0 24px rgba(212, 163, 73, 0.18),
                    0 8px 32px rgba(0, 0, 0, 0.5),
                    inset 0 0 20px rgba(212, 163, 73, 0.04);
                animation: postPinnedPulse 4s ease-in-out infinite;
                position: relative;
            }
            .card.card-pinned::before {
                content: "";
                position: absolute;
                inset: 0;
                border-radius: inherit;
                background: linear-gradient(
                    135deg,
                    rgba(212, 163, 73, 0.07) 0%,
                    transparent 55%
                );
                pointer-events: none;
                z-index: 0;
            }
            @keyframes postPinnedPulse {
                0%,
                100% {
                    box-shadow:
                        0 0 18px rgba(212, 163, 73, 0.14),
                        0 8px 32px rgba(0, 0, 0, 0.5);
                }
                50% {
                    box-shadow:
                        0 0 32px rgba(212, 163, 73, 0.3),
                        0 8px 40px rgba(0, 0, 0, 0.55);
                }
            }
            .pin-badge {
                display: inline-flex;
                align-items: center;
                gap: 0.25rem;
                background: linear-gradient(
                    135deg,
                    rgba(212, 163, 73, 0.2),
                    rgba(212, 163, 73, 0.1)
                );
                border: 1px solid rgba(212, 163, 73, 0.45);
                border-radius: 20px;
                padding: 0.12rem 0.5rem;
                font-size: 0.66rem;
                font-weight: 700;
                color: var(--amber3);
                letter-spacing: 0.03em;
                box-shadow: 0 0 8px rgba(212, 163, 73, 0.2);
                flex-shrink: 0;
            }
            .pin-expires {
                font-size: 0.6rem;
                opacity: 0.7;
                margin-left: 0.15rem;
            }
            [data-theme="light"] .card.card-pinned {
                background: #fff !important;
                border-color: rgba(56, 189, 180, 0.6);
                box-shadow:
                    0 0 24px rgba(56, 189, 180, 0.22),
                    0 8px 32px rgba(0, 0, 0, 0.08),
                    inset 0 0 20px rgba(56, 189, 180, 0.05);
                animation: postPinnedPulseLight 4s ease-in-out infinite;
            }
            [data-theme="light"] .card.card-pinned::before {
                background: linear-gradient(
                    135deg,
                    rgba(56, 189, 180, 0.07) 0%,
                    transparent 55%
                );
            }
            [data-theme="light"] .card.card-pinned * {
                color: unset !important;
            }
            [data-theme="light"] .card.card-pinned .tag {
                background: unset;
                border-color: unset;
            }
            @keyframes postPinnedPulseLight {
                0%,
                100% {
                    box-shadow:
                        0 0 16px rgba(56, 189, 180, 0.18),
                        0 8px 24px rgba(0, 0, 0, 0.07);
                }
                50% {
                    box-shadow:
                        0 0 30px rgba(56, 189, 180, 0.38),
                        0 8px 32px rgba(0, 0, 0, 0.1);
                }
            }

            /* Pin duration modal */
            .pin-modal-overlay {
                display: none;
                position: fixed;
                inset: 0;
                z-index: 1100;
                background: rgba(0, 0, 0, 0.6);
                backdrop-filter: blur(6px);
                align-items: center;
                justify-content: center;
            }
            .pin-modal-overlay.open {
                display: flex;
            }
            .pin-modal {
                background: linear-gradient(
                    160deg,
                    rgba(8, 15, 42, 0.98),
                    rgba(10, 20, 55, 0.97)
                );
                border: 1px solid rgba(212, 163, 73, 0.35);
                border-radius: 16px;
                padding: 1.4rem;
                width: min(340px, 90vw);
                box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8);
            }
            .pin-modal h3 {
                font-size: 0.95rem;
                color: var(--amber3);
                margin: 0 0 1rem;
                display: flex;
                align-items: center;
                gap: 0.4rem;
            }
            .pin-modal h3 svg {
                flex-shrink: 0;
            }
            .pin-custom-row {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                gap: 0.6rem;
                margin-bottom: 0.7rem;
            }
            .pin-field {
                display: flex;
                flex-direction: column;
                gap: 0.3rem;
            }
            .pin-field label {
                font-size: 0.7rem;
                color: var(--txt2);
                text-align: center;
            }
            .pin-field input {
                background: rgba(255, 255, 255, 0.06);
                border: 1px solid rgba(255, 255, 255, 0.12);
                border-radius: 10px;
                padding: 0.5rem 0.3rem;
                font-size: 1rem;
                font-family: inherit;
                color: var(--txt);
                text-align: center;
                transition: var(--trans);
                outline: none;
                -moz-appearance: textfield;
            }
            .pin-field input::-webkit-inner-spin-button,
            .pin-field input::-webkit-outer-spin-button {
                opacity: 0.4;
            }
            .pin-field input:focus {
                border-color: rgba(212, 163, 73, 0.6);
                box-shadow: 0 0 0 3px rgba(212, 163, 73, 0.12);
            }
            .pin-preview {
                font-size: 0.74rem;
                color: var(--amber3);
                text-align: center;
                margin: 0.1rem 0 0.8rem;
                min-height: 1.2em;
            }
            [data-theme="light"] .pin-field input {
                background: rgba(0, 0, 0, 0.05);
                border-color: rgba(0, 0, 0, 0.12);
                color: var(--txt);
            }
            [data-theme="light"] .pin-field input:focus {
                border-color: rgba(212, 163, 73, 0.6);
            }
            .pin-modal-actions {
                display: flex;
                gap: 0.5rem;
                justify-content: flex-end;
                margin-top: 0.8rem;
            }
            .pin-btn-cancel {
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 8px;
                padding: 0.4rem 0.9rem;
                cursor: pointer;
                font-size: 0.78rem;
                font-family: inherit;
                color: var(--txt2);
                transition: var(--trans);
            }
            .pin-btn-cancel:hover {
                background: rgba(255, 255, 255, 0.1);
            }
            .pin-btn-confirm {
                background: linear-gradient(
                    135deg,
                    var(--amber2),
                    var(--amber)
                );
                border: none;
                border-radius: 8px;
                padding: 0.4rem 0.9rem;
                cursor: pointer;
                font-size: 0.78rem;
                font-family: inherit;
                color: #0a0f1a;
                font-weight: 700;
                transition: var(--trans);
            }
            .pin-btn-confirm:hover {
                background: linear-gradient(
                    135deg,
                    var(--amber3),
                    var(--amber2)
                );
                transform: translateY(-1px);
            }
            .pin-unpin-btn {
                background: rgba(184, 48, 48, 0.1);
                border: 1px solid rgba(184, 48, 48, 0.3);
                border-radius: 8px;
                padding: 0.4rem 0.9rem;
                cursor: pointer;
                font-size: 0.78rem;
                font-family: inherit;
                color: var(--red);
                transition: var(--trans);
                margin-right: auto;
            }
            .pin-unpin-btn:hover {
                background: rgba(184, 48, 48, 0.2);
            }
            [data-theme="light"] .pin-modal {
                background: linear-gradient(160deg, #fff, #f9f6ee);
                border-color: rgba(212, 163, 73, 0.4);
            }
            [data-theme="light"] .pin-dur-btn {
                background: rgba(0, 0, 0, 0.04);
                border-color: rgba(0, 0, 0, 0.1);
                color: var(--txt2);
            }
            [data-theme="light"] .pin-dur-btn:hover,
            [data-theme="light"] .pin-dur-btn.selected {
                background: rgba(212, 163, 73, 0.15);
                border-color: rgba(212, 163, 73, 0.5);
                color: #7a5010;
            }