/* Minimal helpers to complement styles.css (no theme overrides) */
        .container {
            max-width: var(--maxw, 1200px);
            margin: 2rem auto;
            padding: 0 1rem;
        }



        @media (min-width: 980px) {
            .grid-2 {
                grid-template-columns: 360px 1fr;
            }
        }

        .stack {
            display: flex;
            flex-direction: column;
            gap: .6rem;
        }

        .row {
            display: flex;
            align-items: center;
            gap: .6rem;
            flex-wrap: wrap;
        }
        input#search {
            max-width: 250px;
        }
       
        .chips {
            display: flex;
            flex-wrap: wrap;
            gap: .4rem;
        }

        /* Post & queue cards inside page-content */
        .post, .queue-item {
            background: rgba(0,0,0,.45);
            border: 1px solid rgba(230,201,101,.35);
            border-radius: 12px;
            padding: .9rem;
        }

        .meta, .muted {
            opacity: .85;
        }

        .chip, .tag {
            display: inline-block;
            border: 1px solid rgba(230,201,101,.35);
            padding: .1rem .5rem;
            border-radius: 999px;
            font-size: .9rem;
            background: rgba(0,0,0,.35);
        }

        .divider {
            height: 1px;
            background: rgba(230,201,101,.25);
            margin: .6rem 0;
        }

        .comment-box {
            border: 1px dashed rgba(230,201,101,.35);
            border-radius: 10px;
            padding: .6rem;
            background: rgba(0,0,0,.35);
        }

        .comment {
            border: 1px solid rgba(230,201,101,.25);
            border-radius: 10px;
            padding: .6rem;
            background: rgba(0,0,0,.25);
        }

        .badge {
            padding: .15rem .5rem;
            border-radius: 999px;
            border: 1px solid rgba(230,201,101,.35);
            background: rgba(0,0,0,.35);
            font-size: .8rem
        }

        .hidden {
            display: none !important;
        }
        /* ===== Modal (Quest Form) ===== */
        .modal {
            position: fixed;
            inset: 0;
            display: none; /* toggled by .show */
            place-items: center;
            background: rgba(0,0,0,.65);
            z-index: 10000; /* above nav, cart, etc. */
        }

            .modal.show {
                display: grid;
            }

        .modal-panel {
            width: min(720px, 92vw);
            max-height: 80vh;
            overflow: auto;
            background: rgba(0,0,0,.85);
            border: 2px solid #5c2e91;
            border-radius: 15px;
            padding: 1rem;
            box-shadow: 0 20px 60px rgba(0,0,0,.55);
        }

        /* Close button */
        .modal-close {
            position: sticky; /* stays visible while scrolling form */
            float: right;
            top: 0;
            margin-left: auto;
            border: 0;
            background: transparent;
            color: #fff;
            font-size: 1.2rem;
            line-height: 1;
            cursor: pointer;
        }

            .modal-close:hover {
                color: var(--gold);
            }
        /* Make the filters card span both columns and center content */
        .filters-card {
            grid-column: 1 / -1; /* full width of the .grid */
            text-align: center;

        }

        .feed-controls {
            display: flex; /* already in your CSS but re-assert here */
            gap: 10px;
            flex-wrap: wrap;
            justify-content: center; /* center the inputs */
            align-items: center;
        }

        #activeTags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center; /* center the chips row */
        }