* { box-sizing: border-box; }
        body {
            margin: 0;
            min-height: 100vh;
            background: linear-gradient(135deg, #1a3a6b 0%, #2980b9 50%, #6dd5fa 100%);
            background-attachment: fixed;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            color: #fff;
            display: flex;
        }

        /* Sidebar */
        .sidebar {
            width: 260px;
            min-width: 260px;
            height: 100vh;
            position: sticky;
            top: 0;
            display: flex;
            flex-direction: column;
            background: rgba(40, 20, 70, 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            box-shadow: 2px 0 18px rgba(0, 0, 0, 0.2);
            z-index: 100;
        }
        .sidebar-title {
            padding: 0.25rem 1rem 0.3rem;
            text-align: center;
            border-bottom: 1px solid rgba(255,255,255,0.12);
        }
        .sidebar-title h1 {
            font-size: 1.3rem;
            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
            margin: 0;
        }
        #sidebar-logo { animation: logo-glow 3.4s ease-in-out infinite; transition: transform 0.2s ease; }
        #sidebar-logo:hover { transform: scale(1.05); }
        @keyframes logo-glow {
            0%, 100% { filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4)); }
            50% { filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4)) drop-shadow(0 0 16px rgba(255,213,74,0.6)); }
        }
        @media (prefers-reduced-motion: reduce) { #sidebar-logo { animation: none; } }
        .sidebar-home {
            display: block; width: calc(100% - 2rem); margin: 0.45rem 1rem 0.2rem;
            padding: 0.28rem 1rem; border-radius: 999px; cursor: pointer; text-align: center;
            border: 1px solid rgba(255,212,74,0.5);
            background: linear-gradient(135deg, rgba(255,212,74,0.22), rgba(255,212,74,0.08));
            color: #ffe08a; font-weight: 800; font-size: 0.9rem; letter-spacing: 0.01em;
            transition: background 0.12s, transform 0.12s;
        }
        .sidebar-home:hover { background: linear-gradient(135deg, rgba(255,212,74,0.34), rgba(255,212,74,0.14)); transform: translateY(-1px); }
        .sidebar-themes {
            flex: 1;
            overflow-y: auto;
            padding: 0.4rem 0;
            scrollbar-width: thin;
            scrollbar-color: rgba(255,255,255,0.25) transparent;
        }
        .sidebar-themes::-webkit-scrollbar { width: 4px; }
        .sidebar-themes::-webkit-scrollbar-track { background: transparent; }
        .sidebar-themes::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 4px; }
        .sidebar-themes::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }
        .sidebar-themes h3 {
            margin: 0;
            padding: 0.25rem 1rem 0.25rem;
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: rgba(255,255,255,0.5);
            font-weight: 600;
        }
        .theme-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            width: 100%;
            padding: 0.22rem 1rem;
            background: none;
            border: none;
            color: rgba(255,255,255,0.8);
            font-size: 0.85rem;
            line-height: 1.25;
            font-weight: 400;
            text-align: left;
            cursor: pointer;
            border-radius: 0;
            box-shadow: none;
            transition: background 0.12s ease;
        }
        .theme-item .theme-icon {
            display: inline-block;
            width: 1.4em;
            text-align: center;
            flex-shrink: 0;
        }
        .theme-item .theme-name {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: left;
        }
        .theme-item .theme-complete {
            flex-shrink: 0;
            margin-left: 0.5rem;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            line-height: 1.05;
            color: rgba(255,255,255,0.55);
            font-variant-numeric: tabular-nums;
        }
        .theme-item .theme-complete .tc-frac { font-size: 0.72rem; }
        .theme-item .theme-complete .tc-label { display: none; }
        .theme-item .theme-complete.full { color: #7ee0a6; font-weight: 600; }
        .theme-item:hover {
            background: rgba(255,255,255,0.1);
            transform: none;
            box-shadow: none;
        }
        .theme-item.active {
            background: rgba(255,255,255,0.18);
            color: #fff;
            font-weight: 600;
        }
        .sidebar-discover, .sidebar-community, .sidebar-minifigs, .sidebar-mocs, .sidebar-funfacts, .sidebar-browse, .sidebar-colors { padding: 0.3rem 1rem; flex-shrink: 0; position: relative; border-top: 1px solid rgba(255,255,255,0.12); }
        .sidebar-browse { display: flex; flex-direction: column; gap: 0.15rem; }
        /* Wrapper around the popout trigger sections. On desktop it's transparent
           (display:contents) so the sections lay out in the sidebar column exactly
           as before; on mobile it becomes a horizontal scroll strip (see below). */
        .sidebar-triggers { display: contents; }
        .me-popover-empty { padding: 0.4rem 0.7rem; font-size: 0.8rem; color: rgba(255,255,255,0.7); }
        .sidebar-discover h3, .sidebar-community h3 {
            margin: 0 0 0.18rem;
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: rgba(255,255,255,0.5);
            font-weight: 600;
        }
        .landing-head { margin: 0 0 1rem; }
        .landing-head h1 { margin: 0 0 0.25rem; font-size: 1.5rem; color: #fff; text-shadow: 1px 1px 5px rgba(0,0,0,0.3); }
        .landing-head p { margin: 0; color: rgba(255,255,255,0.9); font-size: 0.95rem; }
        .pv-public { margin-top: 1rem; border-top: 1px solid #eee; padding-top: 1rem; }
        .pv-public-toggle { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: #2a2a2a; cursor: pointer; }
        .pv-public-toggle input { width: auto; margin: 0; }
        .pv-share-row { margin-top: 0.6rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
        #pv-share-status { font-size: 0.85rem; color: #2e7d32; }
        .collection-head { margin: 0.5rem 0 1rem; }
        .collection-head h2 { margin: 0 0 0.25rem; color: #fff; text-shadow: 1px 1px 5px rgba(0,0,0,0.3); }
        .collection-stats { margin: 0; color: rgba(255,255,255,0.9); font-size: 0.95rem; }
        [data-theme="dark"] .pv-public { border-color: #3c4760; }
        [data-theme="dark"] .pv-public-toggle { color: #e7e9f0; }
        [data-theme="dark"] #pv-share-status { color: #7ee0a6; }
        .collections-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
            gap: 1rem;
        }
        .collection-card {
            display: flex;
            flex-direction: column;
            text-align: left;
            padding: 0;
            background: #fff;
            border: 1px solid #e4e0ee;
            border-radius: 12px;
            overflow: hidden;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            transition: transform 0.12s ease, box-shadow 0.12s ease;
        }
        .collection-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.14); }
        .collection-card-thumb {
            height: 140px;
            background: #f3f0fa;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            overflow: hidden;
        }
        .collection-card-thumb img { width: 100%; height: 100%; object-fit: contain; }
        .collection-card-body { padding: 0.7rem 0.85rem; }
        .collection-card-name { font-weight: 700; color: #2a2a2a; font-size: 0.98rem; margin-bottom: 0.15rem; }
        .collection-card-stats { font-size: 0.82rem; color: #666; }
        [data-theme="dark"] .collection-card { background: #1b2233; border-color: #2f3a52; }
        [data-theme="dark"] .collection-card-thumb { background: #0e1320; }
        [data-theme="dark"] .collection-card-name { color: #e7e9f0; }
        [data-theme="dark"] .collection-card-stats { color: #9aa3b8; }
        /* Reviews (inside the set modal) */
        .reviews { margin: 0.4rem 0 0.9rem; }
        .rating-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.85rem; }
        .rating-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: #777; }
        .rating-your { display: inline-flex; align-items: center; gap: 0.4rem; }
        .your-rating-label { font-size: 0.82rem; color: #555; }
        .rating-remove { background: none; border: none; box-shadow: none; color: #b94a4a; font-size: 0.85rem; line-height: 1; cursor: pointer; padding: 0 0.15rem; }
        .rating-remove:hover { background: none; transform: none; box-shadow: none; opacity: 0.75; }
        [data-theme="dark"] .rating-label { color: #98a1b6; }
        [data-theme="dark"] .your-rating-label { color: #b7bccb; }
        .reviews-head { display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 0.5rem; }
        .reviews-head h3 { margin: 0; font-size: 1rem; font-weight: 800; color: #2a2a2a; }
        .reviews-avg { font-size: 0.85rem; color: #b8860b; letter-spacing: 0.03em; }
        .star-input { display: inline-flex; gap: 0.1rem; }
        .star-input button {
            background: none; border: none; box-shadow: none; padding: 0 0.03rem;
            font-size: 1.15rem; line-height: 1; cursor: pointer; color: #ccc;
        }
        @media (hover: hover) {
            .star-input button:hover { transform: none; box-shadow: none; color: #f5b301; }
        }
        .star-input button.on { color: #f5b301; }
        .review-form { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.75rem; align-items: flex-start; }
        .review-form textarea {
            width: 100%; box-sizing: border-box; padding: 0.5rem 0.6rem; font-size: 0.9rem;
            border: 1px solid #ccc; border-radius: 6px; color: #2a2a2a; resize: vertical; font-family: inherit;
        }
        .review-form-foot { display: flex; align-items: center; gap: 0.5rem; }
        .review-status { font-size: 0.82rem; color: #b94a4a; }
        .review-login-hint { font-size: 0.85rem; color: #777; margin: 0 0 0.75rem; }
        .review-list { display: flex; flex-direction: column; gap: 0.6rem; }
        .review-item { border-top: 1px solid #eee; padding-top: 0.5rem; }
        .review-item-head { display: flex; align-items: baseline; gap: 0.5rem; }
        .review-item-stars { color: #f5b301; font-size: 0.9rem; letter-spacing: 0.02em; white-space: nowrap; }
        .review-item-user { font-weight: 700; font-size: 0.85rem; color: #2a2a2a; }
        .review-item-body { font-size: 0.9rem; color: #444; margin-top: 0.2rem; white-space: pre-wrap; }
        [data-theme="dark"] .reviews-head h3 { color: #e7e9f0; }
        [data-theme="dark"] .review-form textarea { background: #2a3147; color: #e7e9f0; border-color: #3c4760; }
        [data-theme="dark"] .review-item { border-color: #2f3a52; }
        [data-theme="dark"] .review-item-user { color: #e7e9f0; }
        [data-theme="dark"] .review-item-body { color: #b7bccb; }
        [data-theme="dark"] .review-login-hint { color: #9aa3b8; }
        /* Community lists */
        .lists-subhead { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.85); margin: 0.75rem 0 0.6rem; text-shadow: 1px 1px 4px rgba(0,0,0,0.3); }
        .list-desc { margin: 0.3rem 0 0; color: rgba(255,255,255,0.9); font-size: 0.95rem; white-space: pre-wrap; }
        .list-editor { display: flex; flex-direction: column; gap: 0.5rem; max-width: 520px; background: rgba(255,255,255,0.1); padding: 0.9rem; border-radius: 10px; margin: 0 0 1rem; }
        .list-editor input[type="text"], .list-editor textarea {
            width: 100%; box-sizing: border-box; padding: 0.5rem 0.6rem; font-size: 0.95rem; font-family: inherit;
            border: 1px solid rgba(255,255,255,0.35); border-radius: 6px; background: rgba(255,255,255,0.92); color: #2a2a2a; resize: vertical;
        }
        .list-editor .pv-public-toggle { color: #fff; }
        .list-sort-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: #fff; }
        .list-sort-row select {
            padding: 0.4rem 0.5rem; font-size: 0.9rem; font-family: inherit;
            border: 1px solid rgba(255,255,255,0.35); border-radius: 6px; background: rgba(255,255,255,0.92); color: #2a2a2a;
        }
        #list-edit-status { font-size: 0.82rem; color: #ffe08a; }
        .card.has-list-remove { position: relative; }
        .list-remove-btn {
            position: absolute; top: 4px; right: 4px; z-index: 3;
            width: 24px; height: 24px; padding: 0; border-radius: 50%;
            background: rgba(0,0,0,0.55); color: #fff; font-size: 0.85rem; line-height: 1;
            border: none; cursor: pointer; box-shadow: none;
        }
        .list-remove-btn:hover { background: #b94a4a; transform: none; box-shadow: none; }
        .addlist-wrap { position: relative; display: inline-block; }
        .addlist-popover {
            position: absolute; top: 100%; left: 0; margin-top: 0.35rem; z-index: 20;
            background: #2a1446; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.35);
            padding: 0.35rem; min-width: 180px; max-height: 260px; overflow-y: auto;
            display: flex; flex-direction: column; gap: 0.15rem; text-align: left;
        }
        .addlist-empty { color: rgba(255,255,255,0.75); font-size: 0.82rem; padding: 0.4rem 0.6rem; }
        .sidebar-user {
            border-top: 1px solid rgba(255,255,255,0.12);
            padding: 0.45rem 1rem;
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
        }
        .sidebar-user .user-info {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.85rem;
        }
        .sidebar-user .role {
            background: rgba(255,255,255,0.2);
            padding: 0.1rem 0.5rem;
            border-radius: 999px;
            text-transform: uppercase;
            font-size: 0.65rem;
            letter-spacing: 0.05em;
            font-weight: 600;
        }
        .sidebar-user button {
            width: 100%;
            padding: 0.35rem 0.75rem;
            font-size: 0.8rem;
        }
        @media (max-width: 700px), (max-height: 500px) {
            body { flex-direction: column; }
            .sidebar {
                width: 100%;
                min-width: unset;
                height: auto;
                position: relative;
                flex-direction: row;
                flex-wrap: wrap;
            }
            .sidebar-title { border-bottom: none; padding: 0.3rem 1rem; }
            .sidebar-title img { width: 76px !important; }
            .sidebar-title h1 { font-size: 0.95rem !important; margin-top: -0.25rem !important; }
            .sidebar-nav { display: none !important; }
            #add-btn { display: none !important; }
            .sidebar-themes {
                display: flex;
                overflow-x: auto;
                overflow-y: hidden;
                padding: 0 0.5rem 0.35rem;
                gap: 0.25rem;
                flex: unset;
                width: 100%;
            }
            .sidebar-themes h3 { display: none; }
            .theme-item { white-space: nowrap; padding: 0.35rem 0.75rem; border-radius: 999px; font-size: 0.8rem; }
            .theme-item.active { background: rgba(255,255,255,0.25); }
            /* Compact the Our Community / My Stuff nav into one tidy row (no
               vertical-sidebar dividers/padding) so the top bar is shorter and
               the sets appear sooner. */
            /* The trigger buttons live in one horizontal scroll strip, just like
               the theme chips above — a single tidy line you swipe sideways. */
            .sidebar-triggers {
                display: flex;
                flex-wrap: nowrap;
                overflow-x: auto;
                overflow-y: hidden;
                width: 100%;
                gap: 0.3rem;
                padding: 0 0.5rem 0.4rem;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
            }
            .sidebar-triggers::-webkit-scrollbar { display: none; }
            .sidebar-discover,
            .sidebar-community,
            .sidebar-minifigs,
            .sidebar-mocs,
            .sidebar-funfacts,
            .sidebar-browse,
            .sidebar-colors,
            #me-controls {
                border-top: none;
                padding: 0;
                flex: 0 0 auto;
                width: auto;
                position: static;
            }
            .sidebar-browse, .sidebar-colors { display: block; }
            /* Uniform pill triggers in the top bar; the ▸ chevron implies a
               side fly-out, which isn't how they open on mobile, so hide it and
               centre the label for tidy, evenly-sized buttons. */
            .sidebar-discover .me-trigger,
            .sidebar-community .me-trigger,
            .sidebar-minifigs .me-trigger,
            .sidebar-mocs .me-trigger,
            .sidebar-funfacts .me-trigger,
            .sidebar-browse .me-trigger,
            .sidebar-colors .me-trigger,
            #me-controls .me-trigger {
                width: auto;
                padding: 0.42rem 0.95rem;
                border-radius: 999px;
                font-size: 0.8rem;
                justify-content: center;
                border-color: rgba(255,255,255,0.22);
            }
            .sidebar .me-chevron { display: none; }
            /* Account buttons flow inline after Community/My Stuff instead of a
               full-width row of their own, so the top bar is one row shorter. */
            .sidebar-user { flex-direction: row; align-items: center; gap: 0.4rem; width: auto; padding: 0 0.5rem 0.4rem; margin-left: auto; }
            .sidebar-user button { width: auto; }
            /* Keep the mobile top bar lean: hide the "signed in as" text (the
               Profile button covers account access) and the legal disclaimer
               (it belongs in a footer, not at the top of a phone screen). */
            .sidebar-user .user-info { display: none; }
            .sidebar-disclaimer { display: none; }
        }

        /* Main area */
        .main-area {
            flex: 1;
            overflow-y: auto;
            height: 100vh;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem 1.5rem 3rem;
        }
        .main-sticky-header {
            position: sticky;
            top: 0;
            z-index: 50;
            background: linear-gradient(135deg, #1a3a6b 0%, #2980b9 50%, #6dd5fa 100%);
            background-attachment: fixed;
            padding: 1.5rem 19rem 0.25rem 5rem;
            margin: -2rem -1.5rem 1rem;
        }
        body.is-logged-in .main-sticky-header { padding-right: 12.5rem; }
        @media (max-width: 700px) {
            .main-sticky-header { padding-right: 1.5rem; padding-left: 1.5rem; }
            body.is-logged-in .main-sticky-header { padding-right: 1.5rem; }
            /* Mobile: hide the intro hero, the whole Trending/New strip, and the
               compact/density toggle. */
            #hero,
            #density-btn,
            #trending,
            #related,
            #view-minifigs,
            #view-mocs,
            #share-set-btn,
            #addlist-wrap,
            #select-btn,
            #select-bar { display: none !important; }
            /* …but the list-picker bar must stay usable on mobile. */
            #select-bar.list-mode { display: flex !important; }
            /* Keep the rating on one line on narrow screens. */
            .rating-row { flex-wrap: nowrap; gap: 0.25rem 0.5rem; }
            .rating-label, .your-rating-label { display: none; }
            .set-top-actions .reviews { margin-left: 0; }
        }
        h1 {
            font-size: 1.3rem;
            text-align: center;
            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
            margin: 0;
        }
        .actions {
            display: flex;
            justify-content: center;
            gap: 0.75rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }
        /* "Back to Sets" buttons removed — navigation is via the sidebar/logo.
           Also collapse any action row left with nothing visible so no empty
           1.5rem gap remains (re-evaluates live as buttons toggle their hidden
           state, e.g. the logged-in "＋ New list" button). */
        button[data-i18n="back_to_sets"] { display: none; }
        .actions:not(:has(> :not([data-i18n="back_to_sets"]):not([hidden]))) { display: none; }
        /* ...except the profile/admin screens, which have no obvious in-content
           way back to the catalogue — keep their explicit "Back to Sets" button. */
        #users-view .actions,
        #analytics-view .actions,
        #needs-view .actions,
        #themes-view .actions,
        #import-view .actions { display: flex; }
        #users-view [data-i18n="back_to_sets"],
        #analytics-view [data-i18n="back_to_sets"],
        #needs-view [data-i18n="back_to_sets"],
        #themes-view [data-i18n="back_to_sets"],
        #import-view [data-i18n="back_to_sets"] { display: inline-flex; }
        button {
            background: #fff;
            color: #5a3a8f;
            border: 0;
            padding: 0.7rem 1.4rem;
            font-size: 0.95rem;
            font-weight: 600;
            border-radius: 999px;
            cursor: pointer;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
            transition: transform 0.1s ease, box-shadow 0.1s ease;
        }
        button:hover:not(:disabled):not(.search-clear):not(.set-nav):not(.owned-detail-title) {
            transform: translateY(-1px);
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
        }
        button:disabled { opacity: 0.6; cursor: not-allowed; }
        button.danger { color: #b71c1c; }
        button.ghost {
            background: transparent;
            color: #fff;
            box-shadow: none;
            border: 1px solid rgba(255,255,255,0.5);
        }
        button.cancel {
            background: #eee;
            color: #555;
            box-shadow: none;
        }
        button.small {
            padding: 0.35rem 0.9rem;
            font-size: 0.8rem;
        }
        #status {
            text-align: center;
            font-size: 0.95rem;
            opacity: 0.9;
            margin: 0;
            padding: 0.35rem 0 0.1rem;
        }
        #status:empty { display: none; }
        #status.error { color: #ffd3d3; }
        .form-error {
            color: #b71c1c;
            background: #ffebee;
            border-radius: 6px;
            padding: 0.5rem 0.75rem;
            margin: 0.25rem 0 0;
            font-size: 0.9rem;
            min-height: 1rem;
        }
        .form-error:empty { display: none; }

        /* Login screen */
        #login-view {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: calc(100vh - 6rem);
        }
        .login-card {
            background: rgba(255,255,255,0.97);
            color: #2a2a2a;
            border-radius: 14px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.25);
            max-width: 380px;
            width: 100%;
            padding: 2rem 1.75rem;
        }
        .login-card h2 {
            margin: 0 0 1.25rem;
            color: #5a3a8f;
            font-size: 1.3rem;
            text-align: center;
        }
        .login-card label {
            display: flex;
            flex-direction: column;
            margin-bottom: 0.9rem;
            font-size: 0.75rem;
            font-weight: 600;
            color: #5a3a8f;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .login-card input {
            margin-top: 0.3rem;
            padding: 0.65rem 0.75rem;
            font-size: 0.95rem;
            border: 1px solid #ccc;
            border-radius: 6px;
            color: #2a2a2a;
        }
        .login-card input:focus {
            outline: none;
            border-color: #764ba2;
            box-shadow: 0 0 0 3px rgba(118,75,162,0.2);
        }
        .login-actions {
            margin-top: 1rem;
            display: flex;
            justify-content: flex-end;
        }
        #signup-view {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: calc(100vh - 6rem);
        }
        .login-card-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin: 0 0 1.25rem;
        }
        .login-card-header h2 {
            margin: 0;
            flex: 1;
            color: #5a3a8f;
            font-size: 1.3rem;
            text-align: center;
        }
        .top-left-back {
            position: fixed;
            top: 1rem;
            left: 1.25rem;
            z-index: 100;
        }
        .top-left-back button {
            padding: 0.5rem 1rem;
            font-size: 0.85rem;
            font-weight: 600;
            border-radius: 6px;
            cursor: pointer;
            border: none;
            background: rgba(255,255,255,0.92);
            color: #5a3a8f;
        }
        .top-left-back button:hover { filter: brightness(1.05); }
        .field-error {
            color: #c62828;
            font-size: 0.75rem;
            font-weight: 600;
            margin-top: 0.25rem;
            display: block;
            min-height: 0.9em;
            text-transform: none;
            letter-spacing: 0;
        }
        .sidebar-not-logged-in {
            color: #ff6b6b;
            font-weight: 700;
            font-size: 0.95rem;
            text-align: center;
        }
        .top-right-auth {
            position: fixed;
            top: 1rem;
            right: 1.25rem;
            display: flex;
            gap: 0.5rem;
            z-index: 1000;
        }
        .top-right-auth button {
            padding: 0.5rem 1rem;
            font-size: 0.85rem;
            font-weight: 600;
            border-radius: 6px;
            cursor: pointer;
            border: 1px solid rgba(255,255,255,0.55);
            box-shadow: 0 2px 8px rgba(0,0,0,0.35);
            min-width: 6rem;
            text-align: center;
        }
        @media (max-width: 700px), (max-height: 500px) {
            /* Anchor to the page (not the viewport) so the auth buttons sit at
               the top bar's top-right and scroll away WITH it, instead of
               floating fixed over the content. */
            body { position: relative; }
            .top-right-auth {
                position: absolute;
                top: env(safe-area-inset-top, 0.5rem);
                right: 0.5rem;
                padding-top: 0.5rem;
            }
            .top-right-auth button {
                padding: 0.4rem 0.7rem;
                font-size: 0.8rem;
                min-width: 4.5rem;
            }
        }
        .top-right-auth .login-btn {
            background: rgba(255,255,255,0.92);
            color: #5a3a8f;
        }
        .top-right-auth .signup-btn {
            background: #5a3a8f;
            color: #fff;
        }
        .top-right-auth .logout-btn {
            background: rgba(255,255,255,0.92);
            color: #5a3a8f;
        }
        .top-right-auth button:hover { filter: brightness(1.05); }
        .lang-picker {
            padding: 0.5rem 1.6rem 0.5rem 0.6rem;
            font-size: 0.85rem;
            font-weight: 600;
            border-radius: 6px;
            cursor: pointer;
            border: 1px solid rgba(255,255,255,0.55);
            box-shadow: 0 2px 8px rgba(0,0,0,0.35);
            background: rgba(255,255,255,0.92);
            color: #5a3a8f;
            min-width: 4.5rem;
            text-align: center;
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%235a3a8f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 1 5 5 9 1'/></svg>");
            background-repeat: no-repeat;
            background-position: right 0.55rem center;
        }
        .lang-picker:hover { filter: brightness(1.05); }
        @media (max-width: 700px), (max-height: 500px) {
            .lang-picker { display: none; }
        }
        .top-right-auth .info-btn {
            width: 34px; height: 34px; min-width: 0; padding: 0;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,0.55);
            background: rgba(255,255,255,0.92);
            color: #5a3a8f;
            font-family: Georgia, 'Times New Roman', serif;
            font-style: italic; font-weight: 700; font-size: 1.15rem; line-height: 1;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,0.35);
            flex: 0 0 auto;
            display: inline-flex; align-items: center; justify-content: center;
        }
        @media (max-width: 700px), (max-height: 500px) {
            .top-right-auth .info-btn { width: 30px; height: 30px; min-width: 0; padding: 0; font-size: 1.05rem; }
        }
        .top-right-auth .info-btn:hover { filter: brightness(1.05); }
        /* About modal content */
        .about { max-width: 640px; }
        .about-eyebrow {
            font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
            font-size: 0.7rem; color: #b06a1e; margin: 1.5rem 0 0.4rem;
        }
        .about h2 {
            font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em;
            color: #1c1630; margin: 0 0 0.9rem; line-height: 1.1;
        }
        .about-lede { font-size: 1.06rem; color: #34304a; line-height: 1.6; }
        .about p { margin: 0 0 1.05em; line-height: 1.65; color: #33313f; }
        .about h3 {
            font-size: 1.1rem; font-weight: 800; color: #1c1630;
            margin: 1.7em 0 0.4em; letter-spacing: -0.01em;
        }
        .about-disclaimer { font-size: 0.82rem; color: #8a8698; margin-top: 1.8em; }

        /* Set of the Day */
        .sotd { margin: 0 0 1.2rem; }
        .sotd-head { margin: 0 0 0.5rem; }
        .sotd-heading { font-size: 1rem; font-weight: 800; color: #fff; margin: 0; }
        .sotd-card {
            display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left;
            padding: 0.8rem; border-radius: 14px; cursor: pointer;
            background: linear-gradient(135deg, rgba(255,212,59,0.18), rgba(255,255,255,0.05));
            border: 1px solid rgba(255,212,59,0.42);
            box-shadow: 0 6px 20px rgba(0,0,0,0.25);
            transition: transform 0.12s ease, box-shadow 0.12s ease;
        }
        .sotd-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.32); }
        .sotd-img {
            width: 108px; height: 108px; object-fit: contain; flex: 0 0 auto;
            background: #fff; border-radius: 10px; padding: 6px;
        }
        .sotd-info { min-width: 0; }
        .sotd-name { font-weight: 800; font-size: 1.1rem; color: #fff; line-height: 1.2; }
        .sotd-meta { margin-top: 0.35rem; font-size: 0.85rem; color: rgba(255,255,255,0.82); font-variant-numeric: tabular-nums; }
        .sotd-cue { margin-top: 0.5rem; font-size: 0.8rem; font-weight: 700; color: #ffd43b; }
        @media (max-width: 480px) {
            .sotd-img { width: 84px; height: 84px; }
            .sotd-name { font-size: 1rem; }
        }

        /* Guess the Set quiz */
        .quiz-card { max-width: 560px; max-height: calc(100dvh - 3rem); }
        .quiz-card .quiz-body { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
        .quiz-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0.4rem 0 0.8rem; }
        .quiz-top h2 { font-size: 1.5rem; font-weight: 800; color: #2a2340; margin: 0; }
        .quiz-scores { display: flex; gap: 0.8rem; }
        .quiz-score-box { display: flex; flex-direction: column; align-items: center; font-weight: 800; font-size: 1.1rem; color: #2a2340; font-variant-numeric: tabular-nums; }
        .quiz-score-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #9a94ab; }
        .quiz-img-wrap {
            position: relative;
            background: #fff; border-radius: 12px; padding: 0.75rem;
            min-height: 130px; flex: 0 1 auto; min-height: 0;
            display: flex; align-items: center; justify-content: center;
            overflow: hidden;
        }
        .quiz-img { display: block; max-width: 100%; max-height: min(240px, 30vh); object-fit: contain; }
        .quiz-img-wrap.loading::after {
            content: ''; position: absolute; top: 50%; left: 50%; margin: -17px 0 0 -17px;
            width: 34px; height: 34px; border: 3px solid rgba(90,58,143,0.25);
            border-top-color: #5a3a8f; border-radius: 50%;
            animation: quiz-spin 0.8s linear infinite;
        }
        @keyframes quiz-spin { to { transform: rotate(360deg); } }
        .quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 0.8rem; }
        .quiz-option {
            padding: 0.75rem 0.9rem; border-radius: 10px; cursor: pointer; text-align: left;
            background: #fff; border: 1.5px solid #dcd6e6; color: #2a2340; font-weight: 600; font-size: 0.92rem;
            transition: border-color 0.12s, background 0.12s;
        }
        .quiz-option:hover:not(:disabled) { border-color: #5a3a8f; background: #f7f4fc; }
        .quiz-option:disabled { cursor: default; }
        .quiz-option.correct { background: #e6f7ec; border-color: #37b877; color: #1c6b42; }
        .quiz-option.wrong { background: #fdecec; border-color: #e05a5a; color: #a33; }
        .quiz-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.8rem; min-height: 2.4rem; flex: 0 0 auto; }
        .quiz-feedback { font-weight: 700; }
        .quiz-feedback.good { color: #2fa869; }
        .quiz-feedback.bad { color: #d05555; }
        .quiz-next {
            padding: 0.6rem 1.2rem; border-radius: 10px; cursor: pointer;
            background: #5a3a8f; color: #fff; font-weight: 700; border: none; box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }
        .quiz-next:hover { filter: brightness(1.08); }
        .quiz-actions { display: flex; gap: 0.5rem; align-items: center; }
        .quiz-btn-sec {
            padding: 0.55rem 0.9rem; border-radius: 10px; cursor: pointer;
            background: #f0edf6; color: #5a3a8f; font-weight: 700; border: 1px solid #dcd6e6;
        }
        .quiz-btn-sec:hover { background: #e7e1f2; }
        /* ── Poster-styled game modals: LEGO brick arcade look ───────────── */
        .modal-card.quiz-card {
            background:
                radial-gradient(rgba(255,255,255,0.045) 1.4px, transparent 1.6px) 0 0 / 22px 22px,
                radial-gradient(130% 95% at 50% -12%, #22437e 0%, #0d1c40 72%);
            color: #fff; border: 1px solid rgba(255,255,255,0.14);
        }
        .quiz-card .modal-close { color: #fff; }
        .quiz-card .quiz-top h2 {
            color: #ffcf3f; text-transform: uppercase; letter-spacing: 0.01em; font-weight: 900;
            text-shadow: 0 2px 0 rgba(0,0,0,0.45);
        }
        .quiz-card .quiz-score-box { color: #fff; }
        .quiz-card .quiz-score-label { color: rgba(255,255,255,0.62); }
        .quiz-card .price-name, .quiz-card .sotd-name { color: #fff; }
        /* Prompt as a white brick banner */
        .quiz-card .hilo-prompt {
            background: #fff; color: #14224a; font-weight: 800; text-align: center;
            padding: 0.45rem 1rem; border-radius: 999px; margin: 0.2rem auto 0.9rem;
            box-shadow: 0 3px 0 rgba(0,0,0,0.28); align-self: center;
        }
        /* Answer options as coloured LEGO bricks (red / yellow / green / blue) */
        .quiz-card .quiz-option {
            text-align: center; color: #fff; font-weight: 800; font-size: 0.98rem;
            border: none; border-radius: 12px; padding: 0.9rem 0.9rem;
            text-shadow: 0 1px 2px rgba(0,0,0,0.35);
            box-shadow: 0 5px 0 rgba(0,0,0,0.32), 0 8px 14px rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.28);
            transition: transform 0.1s ease, filter 0.1s ease;
        }
        .quiz-card .quiz-options .quiz-option:nth-child(4n+1) { background: linear-gradient(180deg, #ff5a44, #d8321f); }
        .quiz-card .quiz-options .quiz-option:nth-child(4n+2) { background: linear-gradient(180deg, #ffd23f, #e6a800); color: #3a2a00; text-shadow: none; }
        .quiz-card .quiz-options .quiz-option:nth-child(4n+3) { background: linear-gradient(180deg, #46c877, #2f9e59); }
        .quiz-card .quiz-options .quiz-option:nth-child(4n)   { background: linear-gradient(180deg, #3f97ef, #2f6fd0); }
        .quiz-card .quiz-option:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.08); }
        .quiz-card .quiz-option:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,0.32), inset 0 2px 0 rgba(255,255,255,0.28); }
        .quiz-card .quiz-option:disabled { cursor: default; filter: brightness(0.5) saturate(0.7); }
        .quiz-card .quiz-option.correct { filter: none; box-shadow: 0 0 0 4px #37ffa0, 0 5px 0 rgba(0,0,0,0.32), 0 8px 16px rgba(0,0,0,0.35); }
        .quiz-card .quiz-option.wrong { filter: none; box-shadow: 0 0 0 4px #ff6b6b, 0 5px 0 rgba(0,0,0,0.32); }
        .quiz-card .quiz-feedback.good { color: #6ef0a6; }
        .quiz-card .quiz-feedback.bad { color: #ff9090; }
        .quiz-card .quiz-btn-sec { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.25); }
        .quiz-card .quiz-btn-sec:hover { background: rgba(255,255,255,0.2); }
        .quiz-card .quiz-next { background: linear-gradient(180deg, #ffd23f, #e6a800); color: #3a2a00; box-shadow: 0 4px 0 rgba(0,0,0,0.3); }
        /* Two-choice brick buttons (Higher/Lower, Set or MOC, Retired) get depth too. */
        .quiz-card .hilo-btn { border-radius: 12px; box-shadow: 0 5px 0 rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.28); text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
        .quiz-card .hilo-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.28); }
        /* Daily result text on the dark ground. */
        .quiz-card .daily-score { color: #ffcf3f; }
        .quiz-card .daily-streak-line { color: #ffd23f; }
        .quiz-card .daily-dot { background: rgba(255,255,255,0.22); }
        @media (max-width: 480px) {
            .quiz-options { grid-template-columns: 1fr; }
            .quiz-img { max-height: min(220px, 26vh); }
        }
        /* Gallery */
        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 1.5rem;
        }
        @media (max-width: 600px) { .gallery { grid-template-columns: 1fr; } }
        .gallery.compact { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 0.9rem; }
        .gallery.compact .card { contain-intrinsic-size: 165px 215px; }
        .gallery.compact .card .caption { padding: 0.5rem 0.65rem; }
        .gallery.compact .card .caption .name { font-size: 0.85rem; }
        /* Shrink the badges in compact view so they cover less of the image. */
        .gallery.compact .value-badge { width: 26px; height: 26px; bottom: 0.35rem; left: 0.35rem; }
        .gallery.compact .value-badge span { font-size: 0.4rem; }
        .gallery.compact .new-ribbon,
        .gallery.compact .retired-ribbon {
            font-size: 0.5rem;
            padding: 0.12rem 0.4rem;
            top: 0.35rem;
            left: 0.35rem;
            letter-spacing: 0.03em;
        }
        .rating-badge {
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            background: rgba(0, 0, 0, 0.72);
            color: #ffd24a;
            font-size: 0.72rem;
            font-weight: 700;
            padding: 0.15rem 0.45rem;
            border-radius: 999px;
            letter-spacing: 0.02em;
            pointer-events: none;
        }
        .gallery.compact .rating-badge { font-size: 0.58rem; padding: 0.1rem 0.35rem; top: 0.35rem; right: 0.35rem; }
        .density-btn.active { background: #ffd43b; color: #2a1446; }
        .select-btn.active { background: #ffd43b; color: #2a1446; }
        /* In list-select mode the bar only offers Clear / Done. */
        .select-bar.list-mode #sel-favorites-btn,
        .select-bar.list-mode #sel-wishlist-btn,
        .select-bar.list-mode #sel-owned-btn { display: none; }
        .select-bar {
            position: fixed;
            bottom: 1.25rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 94vw;
            background: rgba(40, 20, 70, 0.97);
            color: #fff;
            padding: 0.6rem 1.1rem;
            border-radius: 999px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
            z-index: 300;
        }
        .select-bar .select-count { font-weight: 600; white-space: nowrap; }
        .select-bar-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
        .select-bar-actions button { padding: 0.4rem 0.9rem; font-size: 0.85rem; }
        .gallery.select-mode .fav-star,
        .gallery.select-mode .owned-mark,
        .gallery.select-mode .wishlist-mark { display: none; }
        .gallery.select-mode .card { cursor: pointer; }
        /* List-picker screen: show ONLY the search/sort/min-max filters, the
           compact grid, and the bottom picker bar — hide everything else. */
        body.list-picking .sidebar,
        body.list-picking #hero,
        body.list-picking #trending,
        body.list-picking #landing-head,
        body.list-picking #stats-line,
        body.list-picking #quick-chips,
        body.list-picking #filter-summary,
        body.list-picking #status,
        body.list-picking .search-row .utility-group { display: none !important; }
        body.list-picking .main-sticky-header { padding: 1.25rem 1.5rem 0.5rem; margin-bottom: 1rem; }
        /* Bright ring drawn over the whole card so a selected set is obvious on every side. */
        .card.selected::before {
            content: '';
            position: absolute;
            inset: 0;
            border: 4px solid #ffd43b;
            border-radius: inherit;
            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
            z-index: 4;
            pointer-events: none;
        }
        .card.selected::after {
            content: '✓';
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: #ffd43b;
            color: #2a1446;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 0.9rem;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
            z-index: 5;
        }
        .quick-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: 0 0 0.5rem; }
        .qchip {
            padding: 0.35rem 0.9rem;
            font-size: 0.85rem;
            border: none;
            border-radius: 999px;
            background: rgba(255,255,255,0.18);
            color: #fff;
            cursor: pointer;
        }
        .qchip:hover:not(.active) { background: rgba(255,255,255,0.28); }
        .qchip.active { background: #ffd43b; color: #2a1446; font-weight: 600; }
        .hero {
            position: relative;
            text-align: center;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 16px;
            padding: 1.4rem 1.5rem 1.6rem;
            margin: 0 0 1.25rem;
            color: #fff;
        }
        .hero-logo { width: 96px; height: auto; margin: 0 auto 0.5rem; display: block; }
        .hero-title { margin: 0 0 0.4rem; font-size: 1.4rem; font-weight: 800; }
        .hero-text { margin: 0 auto; max-width: 560px; font-size: 0.95rem; line-height: 1.5; opacity: 0.9; white-space: pre-line; }
        .hero-close {
            position: absolute;
            top: 0.5rem;
            right: 0.6rem;
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.7);
            font-size: 1.4rem;
            line-height: 1;
            cursor: pointer;
            padding: 0.2rem 0.45rem;
        }
        .hero-close:hover { color: #fff; }
        /* Visible focus indicator for keyboard users (cards, buttons, links). */
        :focus-visible { outline: 2px solid #ffd43b; outline-offset: 2px; }
        @media (max-width: 600px) {
            /* Compact the welcome hero on phones so set images reach the fold. */
            .hero { padding: 0.7rem 2.4rem 0.7rem 1rem; margin: 0 0 0.85rem; text-align: left; }
            .hero-logo { display: none; }
            .hero-title { font-size: 1.05rem; margin: 0; }
            .hero-text { display: none; }
            /* Comfortable tap targets for the icon buttons. */
            .refresh-btn, .sort-dir-btn, .range-trigger { min-height: 40px; }
        }
        /* Random / Guess-the-set actions in the quick row (replaced the filter chips). */
        .chip-play {
            padding: 0.4rem 1rem; font-size: 0.85rem; font-weight: 700;
            border: 1px solid rgba(255,255,255,0.3); border-radius: 999px; cursor: pointer;
            background: rgba(255,255,255,0.16); color: #fff;
        }
        .chip-play:hover { background: rgba(255,255,255,0.28); }
        @media (max-width: 600px) {
            #sotd { display: none; }
        }
        /* Fact of the Day (home view) */
        .fotd {
            display: flex; align-items: center; gap: 0.9rem; margin: 0 0 1.1rem;
            padding: 0.85rem 1.1rem; border-radius: 14px;
            background: linear-gradient(135deg, rgba(47,111,219,0.16), rgba(255,255,255,0.05));
            border: 1px solid rgba(47,111,219,0.32);
        }
        .fotd-icon { font-size: 1.7rem; flex: 0 0 auto; line-height: 1; }
        .fotd-body { min-width: 0; }
        .fotd-label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #7aa5ff; margin-bottom: 0.15rem; }
        .fotd-text { color: #fff; font-size: 0.98rem; line-height: 1.4; }
        /* Sign-up promo popup */
        .signup-modal-card { max-width: 430px; text-align: center; }
        .signup-modal-hero {
            position: relative; overflow: hidden;
            background: linear-gradient(150deg, #6d3fd0 0%, #4e2f86 55%, #e89a3c 140%);
            color: #fff; padding: 2rem 1.5rem 1.6rem; border-radius: 14px 14px 0 0;
        }
        .signup-modal-hero::before {
            content: ''; position: absolute; inset: 0; z-index: 0;
            background:
                radial-gradient(40% 60% at 82% 8%, rgba(255,207,63,0.38), transparent 60%),
                radial-gradient(46% 62% at 10% 18%, rgba(232,64,44,0.24), transparent 60%),
                radial-gradient(rgba(255,255,255,0.11) 1.5px, transparent 1.7px);
            background-size: auto, auto, 22px 22px;
            -webkit-mask-image: linear-gradient(#000, rgba(0,0,0,0.55));
                    mask-image: linear-gradient(#000, rgba(0,0,0,0.55));
        }
        .signup-modal-hero > * { position: relative; z-index: 1; }
        .signup-modal-crown {
            font-size: 2.8rem; line-height: 1; display: inline-block; margin-bottom: 0.5rem;
            filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35));
        }
        .signup-modal-card .signup-modal-hero h2 {
            font-size: 1.55rem; font-weight: 900; margin: 0 0 0.45rem; letter-spacing: -0.025em;
            color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.18);
        }
        .signup-modal-card .signup-modal-lead {
            font-size: 1rem; opacity: 0.95; margin: 0 auto; max-width: 22rem; line-height: 1.45; color: #fff;
        }
        .signup-modal-perks { list-style: none; margin: 1.5rem 0 0; padding: 0 1.5rem; text-align: left; }
        .signup-modal-perks li {
            display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1rem;
            font-size: 0.98rem; color: #2a2340; font-weight: 500; line-height: 1.3;
        }
        .signup-modal-perks .perk-ic {
            flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: 12px;
            display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem;
        }
        .signup-modal-perks li:nth-child(1) .perk-ic { background: rgba(232,64,44,0.14); }
        .signup-modal-perks li:nth-child(2) .perk-ic { background: rgba(47,111,219,0.14); }
        .signup-modal-perks li:nth-child(3) .perk-ic { background: rgba(224,160,33,0.18); }
        .signup-modal-perks li:nth-child(4) .perk-ic { background: rgba(47,168,105,0.16); }
        .signup-modal-cta {
            display: block; width: calc(100% - 3rem); margin: 1.3rem 1.5rem 0;
            background: linear-gradient(135deg, #7b4bd8, #5a3a8f); color: #fff;
            border: none; border-radius: 14px; padding: 0.95rem 1rem;
            font-size: 1.1rem; font-weight: 800; cursor: pointer;
            box-shadow: 0 8px 22px rgba(90,58,143,0.45);
            transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
        }
        .signup-modal-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(90,58,143,0.55); filter: brightness(1.06); }
        .signup-modal-later {
            display: block; margin: 0.85rem auto 0; background: none; border: none;
            color: #9a94ab; font-weight: 600; font-size: 0.9rem; cursor: pointer;
        }
        .signup-modal-later:hover { color: #5a3a8f; }
        .signup-modal-note { font-size: 0.76rem; color: #a9a4b8; margin: 0.9rem 0 1.4rem; }
        /* First-login onboarding */
        .onboard-card { max-width: 420px; text-align: center; }
        .onboard-hero {
            background: linear-gradient(135deg, #7b4bd8 0%, #5a3a8f 55%, #f2b134 135%);
            color: #fff; padding: 1.8rem 1.5rem 1.4rem; border-radius: 14px 14px 0 0;
        }
        .onboard-emoji { font-size: 2.6rem; line-height: 1; display: block; margin-bottom: 0.4rem; }
        .onboard-card .onboard-hero h2 { font-size: 1.4rem; font-weight: 800; margin: 0; color: #fff; letter-spacing: -0.02em; }
        .onboard-text {
            font-size: 1rem; line-height: 1.5; color: #3a3550;
            margin: 1.3rem auto 0; padding: 0 1.5rem; max-width: 34rem; min-height: 4.5rem;
        }
        .onboard-dots { display: flex; justify-content: center; gap: 0.45rem; margin: 1.2rem 0 1.3rem; }
        .onboard-dot { width: 8px; height: 8px; border-radius: 50%; background: #d8d2e6; }
        .onboard-dot.active { background: #5a3a8f; width: 22px; border-radius: 4px; }
        .onboard-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 1.5rem 1.5rem; }
        .onboard-back { background: none; border: none; color: #8a8698; font-weight: 700; cursor: pointer; font-size: 0.95rem; }
        .onboard-back:hover { color: #5a3a8f; }
        .onboard-next {
            background: linear-gradient(135deg, #7b4bd8, #5a3a8f); color: #fff; border: none;
            border-radius: 10px; padding: 0.65rem 1.3rem; font-weight: 800; font-size: 1rem;
            cursor: pointer; box-shadow: 0 4px 14px rgba(90,58,143,0.35);
        }
        .onboard-next:hover { filter: brightness(1.1); }
        /* Home hub */
        #home-view { padding-bottom: 0.5rem; }
        #home-view:not([hidden]) { animation: home-in 0.45s ease both; }
        /* Opacity only — a transform here would break the hero's fixed-attachment
           background (it'd attach to this element instead of the viewport, so the
           sticky header's gradient would no longer match the page). */
        @keyframes home-in { from { opacity: 0; } to { opacity: 1; } }
        .home-hero {
            position: sticky; top: 0; z-index: 30; overflow: hidden; text-align: center;
            padding: 1.5rem 1.5rem 1.2rem; margin: -2rem -1.5rem 1.1rem;
            background: linear-gradient(135deg, #1a3a6b 0%, #2980b9 50%, #6dd5fa 100%);
            background-attachment: fixed;
        }
        /* Drifting aurora blobs behind the title — the "universe" glow. */
        .home-hero::before, .home-hero::after {
            content: ''; position: absolute; z-index: 0; border-radius: 50%;
            filter: blur(48px); opacity: 0.55; pointer-events: none;
        }
        .home-hero::before {
            width: 360px; height: 360px; top: -175px; left: 6%;
            background: radial-gradient(closest-side, #8c60e6, transparent);
            animation: hero-drift-a 15s ease-in-out infinite alternate;
        }
        .home-hero::after {
            width: 300px; height: 300px; top: -140px; right: 4%;
            background: radial-gradient(closest-side, #3fa9e0, transparent);
            animation: hero-drift-b 17s ease-in-out infinite alternate;
        }
        .home-hero > * { position: relative; z-index: 1; }
        @keyframes hero-drift-a { to { transform: translate(70px, 34px) scale(1.18); } }
        @keyframes hero-drift-b { to { transform: translate(-56px, 26px) scale(1.12); } }
        .home-logo { width: clamp(72px, 12vw, 108px); height: auto; filter: drop-shadow(0 10px 22px rgba(0,0,0,0.5)); }
        .home-title {
            font-size: clamp(1.8rem, 1rem + 3vw, 2.7rem); font-weight: 900; letter-spacing: -0.025em; margin: 0.35rem 0 0;
            background: linear-gradient(100deg, #cfd0ff 0%, #ffffff 12%, #ffd54a 20%, #ffffff 28%, #cfd0ff 44%, #cfd0ff 56%, #ffffff 72%, #ffd54a 80%, #ffffff 88%, #cfd0ff 100%);
            background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
            animation: title-shimmer 4.5s linear infinite;
        }
        /* Two highlight bands + a fixed vertical, looping over exactly one
           background width, so the sweep is slow but frequent and never jumps. */
        @keyframes title-shimmer { from { background-position: 0% center; } to { background-position: -200% center; } }
        @media (prefers-reduced-motion: reduce) {
            #home-view:not([hidden]), .home-hero::before, .home-hero::after, .home-title { animation: none; }
        }
        /* Big shimmering, centered page titles for the browse views. */
        #minifigs-heading, #mocs-heading, #sets-heading {
            text-align: center; margin: 0.5rem auto 0.35rem;
            font-weight: 900; letter-spacing: -0.02em; font-size: clamp(1.6rem, 1rem + 2.4vw, 2.3rem);
            background: linear-gradient(100deg, #cfd0ff 0%, #ffffff 12%, #ffd54a 20%, #ffffff 28%, #cfd0ff 44%, #cfd0ff 56%, #ffffff 72%, #ffd54a 80%, #ffffff 88%, #cfd0ff 100%);
            background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
            animation: title-shimmer 4.5s linear infinite;
        }
        #minifigs-view .collection-head, #mocs-view .collection-head { text-align: center; }
        /* Sets title sits above the sticky header; its 2rem bottom margin cancels
           the header's -2rem top margin so nothing overlaps, and it centres in the
           symmetric container (unlike the header's asymmetric padding). */
        #sets-heading { margin: 0 auto 2rem; }
        @media (prefers-reduced-motion: reduce) {
            #minifigs-heading, #mocs-heading, #sets-heading { animation: none; }
        }
        .home-sub { color: rgba(255,255,255,0.75); font-size: 1rem; margin: 0; }
        .home-statline {
            margin: 0.55rem auto 0; max-width: 90%;
            color: rgba(255,255,255,0.7); font-size: 0.9rem; font-weight: 600;
            font-variant-numeric: tabular-nums; line-height: 1.4;
        }
        /* Section header: bold title + a visible gold-accented rule that fades right. */
        .home-head {
            display: flex; align-items: center; gap: 0.9rem;
            color: #fff; font-size: 1.22rem; font-weight: 800; letter-spacing: -0.015em;
            margin: 2.4rem 0 1.05rem;
        }
        .home-head::after {
            content: ''; order: 2; flex: 1; height: 3px; border-radius: 3px;
            background: linear-gradient(90deg, rgba(255,213,74,0.85), rgba(255,213,74,0.28) 32%, rgba(255,255,255,0.06));
            box-shadow: 0 0 12px rgba(255,193,74,0.28);
        }
        .home-seeall {
            order: 3; flex: 0 0 auto; cursor: pointer;
            padding: 0.4rem 0.85rem; border-radius: 999px;
            border: 1px solid rgba(255,212,74,0.5); background: rgba(255,212,74,0.12);
            color: #ffd54a; font-weight: 800; font-size: 0.82rem; white-space: nowrap;
            transition: background 0.12s, transform 0.12s;
        }
        .home-seeall:hover { background: rgba(255,212,74,0.24); transform: translateY(-1px); }
        /* Home rows all scroll on a single line rather than wrapping. */
        .home-games, .home-today, .home-browse, .home-discover,
        .home-themecards, .home-stats, .home-features, .home-themes, .home-decades {
            overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
            scroll-snap-type: x proximity; padding-bottom: 0.55rem;
        }
        .home-games::-webkit-scrollbar, .home-today::-webkit-scrollbar, .home-browse::-webkit-scrollbar,
        .home-discover::-webkit-scrollbar, .home-themecards::-webkit-scrollbar, .home-stats::-webkit-scrollbar,
        .home-features::-webkit-scrollbar, .home-themes::-webkit-scrollbar, .home-decades::-webkit-scrollbar { height: 8px; }
        .home-games::-webkit-scrollbar-thumb, .home-today::-webkit-scrollbar-thumb, .home-browse::-webkit-scrollbar-thumb,
        .home-discover::-webkit-scrollbar-thumb, .home-themecards::-webkit-scrollbar-thumb, .home-stats::-webkit-scrollbar-thumb,
        .home-features::-webkit-scrollbar-thumb, .home-themes::-webkit-scrollbar-thumb, .home-decades::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.18); border-radius: 999px;
        }
        .home-games > *, .home-today > *, .home-browse > *, .home-discover > *,
        .home-themecards > *, .home-stats > *, .home-features > * { scroll-snap-align: start; }
        .home-games { display: flex; flex-wrap: nowrap; gap: 0.7rem; }
        .home-game {
            position: relative; overflow: hidden;
            flex: 0 0 auto; width: 204px; aspect-ratio: 1 / 1;
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem; cursor: pointer;
            padding: 1.3rem 0.7rem; border-radius: 20px; border: 1px solid rgba(255,255,255,0.16);
            background: linear-gradient(160deg, rgba(140,96,230,0.30), rgba(90,58,143,0.12));
            color: #fff; font-weight: 700; font-size: 0.94rem; text-align: center;
            box-shadow: 0 8px 22px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.22);
            transition: transform 0.18s cubic-bezier(.2,.8,.2,1), box-shadow 0.18s ease, border-color 0.18s ease;
        }
        .home-game > * { position: relative; z-index: 2; }
        /* Glossy top sheen + a soft radial glow rising from the bottom. */
        .home-game::before {
            content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
            background:
                radial-gradient(120% 80% at 50% 118%, rgba(255,255,255,0.28), transparent 60%),
                linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 42%);
        }
        /* Diagonal light streak that sweeps across on its own, arcade-style.
           Uses transform (compositable) so it never forces repaints of neighbours. */
        .home-game::after {
            content: ''; position: absolute; top: -60%; left: -75%; width: 45%; height: 220%; z-index: 3;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
            pointer-events: none; will-change: transform;
            transform: translateX(0) rotate(18deg);
            animation: game-shine 6.5s ease-in-out infinite;
        }
        /* Stagger the sweeps so the whole row twinkles rather than flashing at once. */
        .home-games .home-game:nth-child(4n+1)::after { animation-delay: 0s; }
        .home-games .home-game:nth-child(4n+2)::after { animation-delay: 1.6s; }
        .home-games .home-game:nth-child(4n+3)::after { animation-delay: 3.2s; }
        .home-games .home-game:nth-child(4n)::after { animation-delay: 4.8s; }
        @keyframes game-shine {
            0% { transform: translateX(0) rotate(18deg); }
            13% { transform: translateX(490%) rotate(18deg); }
            100% { transform: translateX(490%) rotate(18deg); }
        }
        .home-game:hover { transform: translateY(-6px) scale(1.04); box-shadow: 0 22px 44px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.3); border-color: rgba(255,255,255,0.55); }
        .home-game:active { transform: translateY(-2px) scale(0.99); }
        .home-game .hg-ic {
            font-size: 2rem; line-height: 1;
            width: 3.7rem; height: 3.7rem; display: flex; align-items: center; justify-content: center;
            border-radius: 50%;
            background: radial-gradient(circle at 50% 35%, rgba(255,255,255,0.32), rgba(255,255,255,0.08));
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4), 0 4px 14px rgba(0,0,0,0.3), 0 0 24px rgba(255,255,255,0.24);
            will-change: transform;
            animation: hg-pulse 2.6s ease-in-out infinite;
        }
        /* Each icon breathes on a slightly different beat. */
        .home-games .home-game:nth-child(2n) .hg-ic { animation-delay: 0.5s; }
        .home-games .home-game:nth-child(3n) .hg-ic { animation-delay: 1.1s; }
        /* Transform only (compositable) so hovering one tile never forces the
           other icons to repaint and flicker. */
        @keyframes hg-pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.07); }
        }
        .home-game:hover .hg-ic { animation-play-state: paused; transform: scale(1.16) rotate(-5deg); transition: transform 0.18s cubic-bezier(.2,.8,.2,1); }
        /* Poster tiles: a game's own artwork fills the whole square. */
        .home-game.has-poster { padding: 0; }
        .home-game .hg-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; border-radius: inherit; }
        .home-game.has-poster > span { display: none; }
        .home-game.has-poster::before { display: none; }
        @media (prefers-reduced-motion: reduce) {
            .home-game::after, .home-game .hg-ic { animation: none; }
        }
        /* Vibrant, distinct colour per game so the row reads like an arcade. */
        .home-games .home-game:nth-child(1) { background: linear-gradient(160deg, #7b4bd8, #4d2f9e); }
        .home-games .home-game:nth-child(2) { background: linear-gradient(160deg, #2f7fd8, #1f4f9e); }
        .home-games .home-game:nth-child(3) { background: linear-gradient(160deg, #2fae74, #1c7a54); }
        .home-games .home-game:nth-child(4) { background: linear-gradient(160deg, #e0a637, #b97a1e); }
        .home-games .home-game:nth-child(5) { background: linear-gradient(160deg, #d85fa6, #9e3f74); }
        .home-games .home-game:nth-child(6) { background: linear-gradient(160deg, #2fb2b2, #1c7d7d); }
        .home-games .home-game:nth-child(7) { background: linear-gradient(160deg, #e0742f, #b0501e); }
        .home-games .home-game:nth-child(8) { background: linear-gradient(160deg, #6a5cd8, #40349e); }
        .home-games .home-game:nth-child(9) { background: linear-gradient(160deg, #d84b73, #9e2f4d); }
        .home-games .home-game:nth-child(10) { background: linear-gradient(160deg, #4b9dd8, #2f6a9e); }
        .home-games .home-game:nth-child(11) { background: linear-gradient(160deg, #8f9e2f, #5f6a1e); }
        .home-games .home-game:nth-child(12) { background: linear-gradient(160deg, #2fae9a, #1c7a6c); }
        .home-games .home-game:nth-child(13) { background: linear-gradient(160deg, #b84be0, #7a2f9e); }
        .home-games .home-game:nth-child(14) { background: linear-gradient(160deg, #e04b4b, #9e2f2f); }
        .home-games .home-game:nth-child(15) { background: linear-gradient(160deg, #4bc0d8, #2f849e); }
        .home-games .home-game:nth-child(16) { background: linear-gradient(160deg, #d8a84b, #9e772f); }
        .home-games .home-game:nth-child(17) { background: linear-gradient(160deg, #4b74e0, #2f4d9e); }
        .home-games .home-game:nth-child(18) { background: linear-gradient(160deg, #e04ba8, #9e2f74); }
        .home-games .home-game:nth-child(19) { background: linear-gradient(160deg, #3fb0a0, #1f7368); }
        .home-games .home-game:nth-child(20) { background: linear-gradient(160deg, #c9a227, #8a6d12); }
        .home-games .home-game:nth-child(21) { background: linear-gradient(160deg, #7b4bd8, #b06a1e); }
        .home-games .home-game:nth-child(22) { background: linear-gradient(160deg, #4b74e0, #2f4d9e); }
        .home-games .home-game:nth-child(23) { background: linear-gradient(160deg, #2f9e6a, #1c7a54); }
        .home-games .home-game:nth-child(24) { background: linear-gradient(160deg, #e0742f, #9e4f1e); }
        /* Snapshot: hide the image while the player answers from memory.
           display:none (not visibility) so it beats showQuizImg's inline visibility. */
        #snap-wrap.snap-hidden img { display: none; }
        #snap-wrap.snap-hidden::after { content: '🧠'; font-size: 3rem; opacity: 0.85; }
        .snap-timer { text-align: center; font-weight: 800; color: #b06a1e; margin: 0.5rem 0 0; }
        /* Daily Challenge */
        .daily-progress { display: flex; gap: 0.4rem; justify-content: center; margin: 0.2rem 0 0.9rem; }
        .daily-dot { width: 14px; height: 14px; border-radius: 50%; background: rgba(90,58,143,0.2); }
        .daily-dot.current { box-shadow: 0 0 0 2px #7b4bd8; }
        .daily-dot.good { background: #37b877; }
        .daily-dot.bad { background: #e05a5a; }
        .daily-result { text-align: center; width: 100%; }
        .daily-score { font-size: 2.2rem; font-weight: 900; color: #2a2340; }
        .daily-grid-e { font-size: 1.5rem; letter-spacing: 0.1em; margin: 0.3rem 0; }
        .daily-streak-line { font-weight: 700; color: #b06a1e; }
        .daily-actions { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.6rem; justify-content: center; }
        /* See-all games grid (wraps instead of scrolling) */
        #games-all-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.6rem; overflow: visible; padding-bottom: 0; }
        #games-all-grid .home-game { width: auto; min-width: 0; padding: 1.1rem 0.5rem; }
        @media (max-width: 620px) { #games-all-grid { grid-template-columns: repeat(3, 1fr); } }
        #games-modal .modal-card { max-width: 920px; }
        #games-modal h2 { margin: 0 0 1rem; color: #fff; }
        /* Beat the Clock timer bar */
        .clock-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.14); overflow: hidden; margin: 0.2rem 0 0.7rem; }
        .clock-bar-fill { height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg, #37b877, #ffd54a 60%, #e05555); transition: width 1s linear; }
        /* Guess the Colour: full-bleed swatch fills the image frame */
        #guess-modal .quiz-img-wrap { transition: background 0.15s; }
        /* Zoomed In: crop hard into the set image */
        .quiz-img.guess-zoom { transform: scale(2.7); }
        /* Sort by Size board */
        .sort-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; min-height: 130px; }
        .sort-tile {
            position: relative; padding: 0; cursor: pointer; border-radius: 12px; overflow: hidden; background: #fff;
            border: 2px solid rgba(255,255,255,0.16); box-shadow: 0 4px 12px rgba(0,0,0,0.25);
            transition: transform 0.12s, border-color 0.12s;
        }
        .sort-tile:hover:not(:disabled):not(.picked) { transform: translateY(-3px); border-color: #7b4bd8; }
        .sort-tile:disabled { cursor: default; }
        .sort-tile img { width: 100%; height: 110px; object-fit: contain; padding: 6px; box-sizing: border-box; display: block; }
        .sort-tile .sort-rank {
            position: absolute; top: 4px; left: 4px; min-width: 22px; height: 22px; padding: 0 4px;
            display: none; align-items: center; justify-content: center; border-radius: 999px;
            background: #5a3a8f; color: #fff; font-weight: 800; font-size: 0.8rem;
        }
        .sort-tile.picked, .sort-tile.revealed { border-color: #37b877; }
        .sort-tile.picked .sort-rank, .sort-tile.revealed .sort-rank { display: flex; }
        .sort-tile.wrong { border-color: #e05a5a; }
        .sort-tile.wrong .sort-rank { background: #d05555; }
        /* Shared game loading spinner (grid games + hilo sides) */
        .game-spinner {
            grid-column: 1 / -1; width: 40px; height: 40px; margin: 2.4rem auto; align-self: center;
            border: 4px solid rgba(255,255,255,0.22); border-top-color: #ffd54a; border-radius: 50%;
            animation: quiz-spin 0.8s linear infinite;
        }
        /* Odd One Out board */
        .odd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; min-height: 150px; }
        .odd-tile {
            padding: 0; cursor: pointer; border-radius: 14px; overflow: hidden; background: #fff;
            border: 2px solid rgba(255,255,255,0.16); box-shadow: 0 4px 14px rgba(0,0,0,0.25);
            transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
        }
        .odd-tile:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,0.4); border-color: #7b4bd8; }
        .odd-tile:disabled { cursor: default; }
        .odd-tile img { width: 100%; height: 130px; object-fit: contain; padding: 8px; box-sizing: border-box; display: block; }
        .odd-tile.correct { border-color: #37b877; box-shadow: 0 0 0 3px rgba(55,184,119,0.4); }
        .odd-tile.wrong { border-color: #e05a5a; box-shadow: 0 0 0 3px rgba(224,90,90,0.4); }
        /* Memory Match board */
        .memory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; min-height: 160px; }
        .mem-card {
            position: relative; aspect-ratio: 1 / 1; padding: 0; cursor: pointer; border-radius: 12px; overflow: hidden;
            border: 1px solid rgba(255,255,255,0.16); background: #fff;
        }
        .mem-card .mem-back {
            position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
            font-size: 1.9rem; background: linear-gradient(135deg, #7b4bd8, #4d2f9e); color: #fff;
            transition: opacity 0.15s;
        }
        .mem-card img { width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; display: none; }
        .mem-card.flipped .mem-back, .mem-card.matched .mem-back { opacity: 0; pointer-events: none; }
        .mem-card.flipped img, .mem-card.matched img { display: block; }
        .mem-card.matched { border-color: #37b877; box-shadow: 0 0 0 2px rgba(55,184,119,0.5); }
        .home-today { display: flex; flex-wrap: nowrap; gap: 0.9rem; align-items: stretch; }
        .home-tcol { flex: 0 0 auto; width: 176px; display: flex; flex-direction: column; }
        .home-tlabel { color: rgba(255,255,255,0.82); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.02em; margin-bottom: 0.5rem; text-align: center; }
        /* Hub day-cards: game-card sized, stacked (image on top, text below). */
        .home-tcol .sotd-card {
            width: 100%; flex: 1 1 auto; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem;
            background: rgba(255,255,255,0.055);
            border: 1px solid rgba(255,255,255,0.12);
            box-shadow: 0 4px 16px rgba(0,0,0,0.2);
        }
        .home-tcol .sotd-card .sotd-img { width: 96px; height: 96px; }
        .home-tcol .sotd-card .sotd-info { min-width: 0; width: 100%; }
        .sotd-img.daily-face { display: flex; align-items: center; justify-content: center; font-size: 3rem; background: linear-gradient(160deg, rgba(255,212,74,0.25), rgba(140,96,230,0.18)); }
        .home-tcol .sotd-card:hover { border-color: rgba(255,212,74,0.45); box-shadow: 0 12px 28px rgba(0,0,0,0.32); }
        .home-fotd { margin-top: 0.9rem; }
        .home-browse { display: flex; flex-wrap: nowrap; gap: 0.6rem; }
        /* Popular themes / decades chips */
        .home-themes, .home-decades { display: flex; flex-wrap: nowrap; gap: 0.5rem; }
        .home-chip {
            flex: 0 0 auto;
            display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
            padding: 0.5rem 0.85rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14);
            background: rgba(255,255,255,0.07); color: #fff; font-weight: 700; font-size: 0.88rem;
            transition: background 0.12s, transform 0.12s, border-color 0.12s;
        }
        .home-chip:hover { background: rgba(255,255,255,0.16); transform: translateY(-2px); border-color: rgba(255,212,74,0.45); }
        .home-chip-n { font-size: 0.76rem; font-weight: 800; color: #ffd54a; font-variant-numeric: tabular-nums; }
        /* All-themes card grid */
        .home-themecards { display: flex; flex-wrap: nowrap; gap: 0.7rem; }
        .home-themecard {
            flex: 0 0 auto; width: 176px; cursor: pointer; text-align: left;
            display: flex; flex-direction: column; padding: 0; overflow: hidden; border-radius: 16px;
            border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06);
            color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.2);
            transition: transform 0.14s, box-shadow 0.14s, border-color 0.14s;
        }
        .home-themecard:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,0.36); border-color: rgba(255,212,74,0.5); }
        .home-themecard .htc-thumb {
            width: 100%; height: 112px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden;
        }
        .home-themecard .htc-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 8px; box-sizing: border-box; }
        .home-themecard .htc-ph { font-size: 2.2rem; }
        .home-themecard .htc-body { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.75rem; }
        .home-themecard .htc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 0.9rem; }
        .home-themecard .htc-n { flex: 0 0 auto; font-size: 0.75rem; font-weight: 800; color: #ffd54a; font-variant-numeric: tabular-nums; }
        /* Featured filmstrip of iconic sets */
        .home-filmstrip {
            display: flex; flex-wrap: nowrap; gap: 0.6rem; overflow-x: auto; overflow-y: hidden;
            -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding: 0.3rem 0 0.7rem; margin-top: 0.3rem;
        }
        .home-filmstrip::-webkit-scrollbar { height: 8px; }
        .home-filmstrip::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 999px; }
        .film-card {
            flex: 0 0 auto; width: 176px; height: 176px; padding: 0; cursor: pointer; scroll-snap-align: start;
            border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid rgba(255,255,255,0.16);
            box-shadow: 0 5px 16px rgba(0,0,0,0.28); transition: transform 0.14s ease, box-shadow 0.14s ease;
        }
        .film-card:hover { transform: translateY(-5px) scale(1.03); box-shadow: 0 16px 32px rgba(0,0,0,0.45); }
        .film-card img { width: 100%; height: 100%; object-fit: contain; padding: 9px; box-sizing: border-box; display: block; }
        /* By the numbers */
        .home-stats { display: flex; flex-wrap: nowrap; gap: 0.7rem; }
        .home-stat {
            flex: 0 0 auto; width: 176px;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            text-align: center; padding: 1.3rem 0.8rem; border-radius: 20px;
            border: 1px solid rgba(255,255,255,0.12);
            background: linear-gradient(160deg, rgba(140,96,230,0.22), rgba(90,58,143,0.08));
        }
        .home-stat-n { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.1rem); font-weight: 900; color: #fff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.05; white-space: nowrap; }
        .home-stat-l { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255,255,255,0.68); margin-top: 0.25rem; }
        /* What you can do */
        .home-features { display: flex; flex-wrap: nowrap; gap: 0.6rem; margin-bottom: 1.8rem; }
        .home-feature {
            flex: 0 0 auto; width: 176px; text-align: center;
            display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
            padding: 1.4rem 0.9rem; border-radius: 20px; border: 1px solid rgba(255,255,255,0.12);
            background: rgba(255,255,255,0.05);
            transition: transform 0.14s ease, border-color 0.14s ease;
        }
        .home-feature:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.25); }
        .home-feature .hf-ic {
            font-size: 1.8rem;
            width: 3.4rem; height: 3.4rem; display: flex; align-items: center; justify-content: center;
            border-radius: 50%; background: radial-gradient(circle at 50% 35%, rgba(140,96,230,0.4), rgba(140,96,230,0.14));
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
        }
        .home-feature h4 { margin: 0; color: #fff; font-size: 0.98rem; font-weight: 800; }
        .home-feature p { margin: 0; color: rgba(255,255,255,0.72); font-size: 0.82rem; line-height: 1.4; }
        /* Browse / Discover / decade — game-style tiles, all the same size. */
        .home-browse button, .home-discover button, .home-decades .home-chip {
            flex: 0 0 auto; width: 176px; cursor: pointer;
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem;
            padding: 1.4rem 0.7rem; border-radius: 20px; border: 1px solid rgba(255,255,255,0.16);
            background: linear-gradient(160deg, rgba(140,96,230,0.30), rgba(90,58,143,0.12));
            color: #fff; font-weight: 700; font-size: 0.95rem; text-align: center; white-space: normal;
            box-shadow: 0 8px 22px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.22);
            transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s;
        }
        .home-browse button:hover, .home-discover button:hover, .home-decades .home-chip:hover {
            transform: translateY(-5px) scale(1.03); box-shadow: 0 18px 38px rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.55);
        }
        .home-browse button span:first-child {
            font-size: 1.9rem; line-height: 1; width: 3.4rem; height: 3.4rem;
            display: flex; align-items: center; justify-content: center; border-radius: 50%;
            background: radial-gradient(circle at 50% 35%, rgba(255,255,255,0.3), rgba(255,255,255,0.08));
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
        }
        .home-decades .home-chip { font-size: 1.25rem; font-weight: 900; }
        /* "What I can build" — shown only when logged in. */
        .actions .buildable-btn, .home-browse .buildable-btn { display: none; }
        body.is-logged-in .actions .buildable-btn, body.is-logged-in .home-browse .buildable-btn { display: inline-flex; }
        #mocs-buildable-btn {
            align-items: center; gap: 0.4rem; cursor: pointer; border: none; border-radius: 10px;
            padding: 0.5rem 1rem; font-weight: 700; font-size: 0.95rem; color: #fff;
            background: linear-gradient(135deg, #e0954b, #b0701e);
        }
        #mocs-buildable-btn:hover { filter: brightness(1.08); }
        /* Submit MOC — pill, sits left of the MOCs search bar. */
        .submit-moc-btn {
            flex: 0 0 auto; white-space: nowrap; cursor: pointer; border: none;
            padding: 0.55rem 1.1rem; border-radius: 999px; font-weight: 700; font-size: 0.92rem; color: #fff;
            background: linear-gradient(135deg, #7b4bd8, #5a3a8f); box-shadow: 0 3px 10px rgba(90,58,143,0.35);
        }
        .submit-moc-btn:hover { filter: brightness(1.08); }
        /* Discover (curated landing views) — styled by the shared tile rule above. */
        .home-discover { display: flex; flex-wrap: nowrap; gap: 0.6rem; }
        /* Higher or Lower */
        .hilo-prompt { text-align: center; color: #6a6480; font-weight: 600; margin: 0.2rem 0 1rem; }
        .hilo-arena { display: flex; align-items: stretch; gap: 0.6rem; }
        .hilo-side { flex: 1; min-width: 0; background: #f6f4fb; border: 2px solid #e6e0f0; border-radius: 12px; padding: 0.8rem; text-align: center; transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s; }
        .hilo-side.clickable { cursor: pointer; }
        .hilo-side.clickable:hover { transform: translateY(-3px); border-color: #7b4bd8; box-shadow: 0 10px 24px rgba(0,0,0,0.28); }
        .hilo-side.correct { border-color: #37b877; box-shadow: 0 0 0 3px rgba(55,184,119,0.4); }
        .hilo-side.wrong { border-color: #e05a5a; box-shadow: 0 0 0 3px rgba(224,90,90,0.4); }
        .hilo-img { width: 100%; height: 150px; object-fit: contain; }
        .hilo-name { font-weight: 700; font-size: 0.9rem; color: #2a2340; margin-top: 0.5rem; line-height: 1.2; min-height: 2.2em; }
        .hilo-val { font-weight: 900; font-size: 1.3rem; color: #5a3a8f; margin-top: 0.4rem; font-variant-numeric: tabular-nums; }
        .hilo-vs { align-self: center; font-weight: 800; color: #9a94ab; font-size: 0.9rem; }
        .hilo-controls { display: flex; gap: 0.6rem; margin-top: 1rem; }
        .hilo-btn { flex: 1; padding: 0.9rem; border-radius: 12px; border: none; cursor: pointer; font-weight: 800; font-size: 1.05rem; color: #fff; }
        #hilo-higher { background: linear-gradient(135deg, #37b877, #2fa869); }
        #hilo-lower { background: linear-gradient(135deg, #e8807a, #d05555); }
        #setmoc-set { background: linear-gradient(135deg, #4b8fd8, #2f5f9e); }
        #setmoc-moc { background: linear-gradient(135deg, #e0954b, #b0701e); }
        #retired-yes { background: linear-gradient(135deg, #e0a637, #b97a1e); }
        #retired-no { background: linear-gradient(135deg, #37b877, #2fa869); }
        .hilo-btn:hover { filter: brightness(1.08); }
        /* Guess the Price */
        .price-name { text-align: center; font-weight: 800; font-size: 1.1rem; color: #2a2340; margin: 0.8rem 0; line-height: 1.25; }
        .price-guess { display: flex; align-items: center; gap: 0.5rem; justify-content: center; }
        .price-dollar { font-size: 1.4rem; font-weight: 800; color: #5a3a8f; }
        #price-input, #year-input {
            width: 9rem; font-size: 1.2rem; font-weight: 700; text-align: center;
            padding: 0.6rem 0.7rem; border-radius: 10px; border: 1.5px solid #dcd6e6; color: #2a2340;
        }
        #price-input:disabled, #year-input:disabled { background: #f0edf6; }
        /* Retirement-alert toast: gold, and hints it's tappable. */
        .toast.toast-retire {
            background: linear-gradient(135deg, #ffd43b, #f2b134);
            color: #2a1446; font-weight: 700;
        }
        .toast.toast-clickable { cursor: pointer; }
        .trending { margin: 0 0 1.1rem; }
        .trending-head {
            display: flex;
            align-items: baseline;
            justify-content: flex-start;
            gap: 0.7rem;
            margin: 0 0 0.6rem;
        }
        .trending-heading {
            margin: 0;
            font-size: 0.95rem;
            font-weight: 800;
            color: #fff;
        }
        .trending-seeall {
            flex: 0 0 auto;
            background: none;
            border: none;
            color: #fff;
            font-size: 0.85rem;
            font-weight: 700;
            cursor: pointer;
            padding: 0.1rem 0.2rem;
        }
        .trending-seeall:hover { text-decoration: underline; }
        .trending-row {
            display: flex;
            gap: 0.6rem;
            overflow-x: auto;
            padding-bottom: 0.55rem;
            scroll-snap-type: x proximity;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
        }
        .trending-row::-webkit-scrollbar { height: 7px; }
        .trending-row::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.08); border-radius: 999px; }
        .trending-row::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.32); border-radius: 999px; }
        .trending-row::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); }
        /* The trending strip reuses the gallery .card; just size it for a
           horizontal scroll instead of the grid. */
        .trending-row .card {
            flex: 0 0 auto;
            /* Width is computed in JS (sizeTrendingCards) to exactly equal the
               width a compact gallery card renders at for the current container
               width; the fallback matches the typical value. */
            width: var(--trend-card-w, 182px);
            /* Cards in the horizontal strip must not use content-visibility, or
               off-screen ones collapse to the 290px intrinsic width. */
            content-visibility: visible;
            contain-intrinsic-size: auto;
            scroll-snap-align: start;
        }
        /* Match the compact gallery card exactly (smaller caption + name). */
        .trending-row .card .caption { padding: 0.5rem 0.65rem; }
        .trending-row .card .caption .name { font-size: 0.85rem; }
        /* Related sets strip inside the set modal. */
        /* Tabbed collection sections in the set modal (minifigs / alt builds /
           similar) so they don't stack into one long scroll. */
        .set-tabs { display: flex; flex-wrap: wrap; gap: 0.2rem; margin: 0.9rem 0 0; border-bottom: 1px solid #ece7f5; }
        .set-tab { background: transparent; box-shadow: none; border: none; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px; padding: 0.4rem 0.7rem; font-size: 0.9rem; font-weight: 700; color: #8a7fa8; cursor: pointer; }
        .set-tab:hover { color: #6a3fb0; transform: none; box-shadow: none; }
        .set-tab.active { color: #6a3fb0; border-bottom-color: #6a3fb0; }
        .related { margin: 0.7rem 0 0; }
        .related-heading { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 800; }
        .related-row {
            display: flex;
            gap: 0.6rem;
            overflow-x: auto;
            padding-bottom: 0.55rem;
            scroll-snap-type: x proximity;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            scrollbar-color: rgba(90, 58, 143, 0.4) transparent;
        }
        .related-row::-webkit-scrollbar { height: 7px; }
        .related-row::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 999px; }
        .related-row::-webkit-scrollbar-thumb { background: rgba(90, 58, 143, 0.35); border-radius: 999px; }
        .related-row::-webkit-scrollbar-thumb:hover { background: rgba(90, 58, 143, 0.55); }
        .related-row .card {
            flex: 0 0 auto;
            width: 112px;
            content-visibility: visible;
            contain-intrinsic-size: auto;
            scroll-snap-align: start;
        }
        .related-row .card .caption { padding: 0.35rem 0.45rem; }
        .related-row .card .caption .name { font-size: 0.7rem; }
        .set-top-actions {
            display: flex;
            align-items: center;
            gap: 0.5rem 0.75rem;
            flex-wrap: wrap;
            margin: 0.1rem 0 0.7rem;
        }
        .set-top-actions .reviews { margin: 0; }
        .share-set-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            margin: 0.1rem 0 0.7rem;
            font-size: 0.82rem;
            font-weight: 700;
            padding: 0.35rem 0.85rem;
            border: 1px solid rgba(90, 58, 143, 0.3);
            border-radius: 999px;
            background: rgba(90, 58, 143, 0.08);
            color: #5a3a8f;
            cursor: pointer;
            transition: background 0.13s ease;
        }
        .share-set-btn:hover { background: rgba(90, 58, 143, 0.16); }
        /* On the set modal the Share button is overlaid on the image's top-left. */
        #share-set-btn {
            position: absolute;
            top: 0.7rem;
            left: 0.7rem;
            z-index: 2;
            margin: 0;
            background: rgba(20, 12, 35, 0.62);
            color: #fff;
            border-color: rgba(255, 255, 255, 0.35);
            backdrop-filter: blur(3px);
            -webkit-backdrop-filter: blur(3px);
        }
        #share-set-btn:hover { background: rgba(20, 12, 35, 0.8); }
        .sidebar-disclaimer {
            font-style: italic;
            font-size: 0.62rem;
            line-height: 1.35;
            text-align: center;
            color: rgba(255, 255, 255, 0.6);
            border-top: 1px solid rgba(255,255,255,0.12);
            padding: 0.75rem 1rem 0.2rem;
            margin: 0;
        }
        /* On mobile the disclaimer moves out of the top bar into a real page
           footer at the bottom of the content (desktop keeps it in the sidebar). */
        .page-footer { display: none; }
        @media (max-width: 700px), (max-height: 500px) {
            .page-footer {
                display: block;
                margin-top: 2.5rem;
                padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
                border-top: 1px solid rgba(255,255,255,0.15);
                text-align: center;
            }
            .page-footer p {
                margin: 0;
                font-style: italic;
                font-size: 0.62rem;
                line-height: 1.35;
                color: rgba(255,255,255,0.6);
            }
        }
        .card {
            background: rgba(255, 255, 255, 0.97);
            color: #2a2a2a;
            border-radius: 14px;
            overflow: hidden;
            position: relative;
            content-visibility: auto;
            contain-intrinsic-size: 290px 300px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
            cursor: pointer;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
            display: flex;
            flex-direction: column;
        }
        .card:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
        }
        .card .thumb {
            width: 100%;
            aspect-ratio: 4 / 3;
            background: #fff;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #5a3a8f;
            font-weight: 600;
        }
        .card .thumb img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }
        .card .thumb { position: relative; }
        /* Minifig thumbnails show the whole figure (contain), not cropped. */
        .minifig-card .thumb { background: #f4f1fb; }
        .minifig-card .thumb img { object-fit: contain; padding: 0.4rem; }
        .minifig-sub { display: block; font-size: 0.72rem; color: #8a7fb0; margin-top: 0.15rem; }
        .minifig-detail { display: flex; gap: 1.25rem; align-items: center; margin: 0 0 1.25rem; flex-wrap: wrap; }
        .minifig-detail-img { width: 140px; height: auto; background: #f4f1fb; border-radius: 12px; padding: 0.5rem; box-shadow: 0 6px 18px rgba(0,0,0,0.2); }
        .moc-detail-img { width: 240px; height: 180px; object-fit: cover; background: #f4f1fb; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.2); }
        /* MOC detail lives in a modal like the sets (#moc-modal): hero image on
           top of the white .modal-card, labeled stats (.view-header-row) below. */
        .moc-detail-hero { display: block; width: 100%; height: 40vh; max-height: 340px; object-fit: contain; background: #f4f1fb; }
        .minifig-detail-hero { display: block; width: 100%; height: 32vh; max-height: 280px; object-fit: contain; background: #f4f1fb; padding: 0.75rem; box-sizing: border-box; }
        .moc-detail-hero, .minifig-detail-hero { cursor: zoom-in; }
        /* Admin "Needs attention" — possible-duplicate suffix families. */
        .suffix-family { margin: 0.55rem 0; padding: 0.5rem 0.75rem; background: rgba(255,255,255,0.08); border-radius: 10px; }
        .suffix-family-head { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.25rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
        .suffix-dismiss {
            flex: 0 0 auto; background: rgba(255,255,255,0.12); border: none; color: rgba(255,255,255,0.8);
            font-size: 0.72rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: 999px; cursor: pointer;
        }
        .suffix-dismiss:hover { background: rgba(255,90,90,0.35); color: #fff; }
        .suffix-reset {
            display: inline-block; margin: 0.4rem 0 0; background: none; border: none;
            color: rgba(255,255,255,0.6); font-size: 0.82rem; cursor: pointer; text-decoration: underline;
        }
        .suffix-reset:hover { color: #fff; }
        .suffix-fam-item { display: block; width: 100%; text-align: left; background: none; border: none; box-shadow: none; color: rgba(255,255,255,0.85); padding: 0.2rem 0.35rem; border-radius: 6px; cursor: pointer; font-size: 0.85rem; }
        .suffix-fam-item:hover { background: rgba(255,255,255,0.12); transform: none; box-shadow: none; }
        .suffix-fam-item.missing { color: #ffd54a; font-weight: 600; }
        .moc-detail-body h2 { margin: 1rem 0 0.7rem; color: #2a2a2a; }
        .moc-detail-body .hdr-value a { color: #6a3fb0; text-decoration: none; }
        .moc-detail-body .hdr-value a:hover { text-decoration: underline; }
        .moc-detail-body .lists-subhead { margin-top: 1.1rem; }
        .moc-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; margin: 0.5rem 0 0; font-size: 0.92rem; }
        .moc-links a { color: #6a3fb0; text-decoration: none; font-weight: 600; }
        .moc-links a:hover { text-decoration: underline; }
        .moc-ext-link { font-weight: 600; }
        /* Breadcrumb trail on detail views/modals. Default colours suit the blue
           page background (minifig view); the .modal-card overrides suit white. */
        .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin: 0 0 0.6rem; font-size: 0.82rem; }
        .breadcrumb a { color: #ffd54a; text-decoration: none; }
        .breadcrumb a:hover { text-decoration: underline; }
        .breadcrumb .crumb-sep { opacity: 0.5; }
        .breadcrumb .crumb-current { opacity: 0.85; }
        .modal-card .breadcrumb a { color: #6a3fb0; }
        .modal-card .breadcrumb .crumb-current { color: #777; }
        .modal-card .breadcrumb .crumb-sep { color: #b3a9c9; }
        .minifig-detail-info h2 { margin: 0 0 0.3rem; }
        .minifig-edit-field { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; color: #fff; }
        .minifig-edit-field input {
            padding: 0.5rem 0.6rem; font-size: 0.95rem; font-family: inherit; box-sizing: border-box;
            border: 1px solid rgba(255,255,255,0.35); border-radius: 6px; background: rgba(255,255,255,0.92); color: #2a2a2a;
        }
        /* Freeze the minifigs/MOCs search + sort bar at the top on scroll, like
           the sets toolbar. Reuse the body's fixed gradient so it blends in and
           the grid scrolls invisibly beneath it; negative side margins bleed it
           to the container edges. */
        .minifigs-search-row { display: flex; justify-content: center; align-items: center; gap: 0.5rem; flex-wrap: wrap; position: sticky; top: 0; z-index: 40; background: linear-gradient(135deg, #1a3a6b 0%, #2980b9 50%, #6dd5fa 100%); background-attachment: fixed; padding: 0.85rem 1.5rem; margin: 0 -1.5rem 1.1rem; }
        /* Clickable minifig thumbnails inside the set modal. */
        .minifig-strip { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.25rem; }
        .minifig-chip {
            flex: 0 0 auto; width: 78px; padding: 0.35rem; background: #f4f1fb; border: none;
            border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); cursor: pointer;
            display: flex; flex-direction: column; align-items: center; gap: 0.2rem; transition: transform 0.1s ease;
        }
        .minifig-chip img { width: 100%; height: 64px; object-fit: contain; }
        .minifig-chip-name {
            font-size: 0.6rem; color: #5a3a8f; line-height: 1.15; text-align: center;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
        .minifig-chip:hover { transform: translateY(-2px); }
        .value-badge {
            position: absolute;
            bottom: 0.5rem;
            left: 0.5rem;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: rgba(34, 130, 74, 0.96);
            color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            line-height: 1.05;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.01em;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
            pointer-events: none;
        }
        .value-badge span { font-size: 0.46rem; width: 100%; text-align: center; line-height: 1.05; word-break: break-word; }
        .new-ribbon {
            position: absolute;
            top: 0.5rem;
            left: 0.5rem;
            background: rgba(46, 160, 90, 0.95);
            color: #fff;
            font-size: 0.65rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 0.2rem 0.5rem;
            border-radius: 999px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
            pointer-events: none;
        }
        .retired-ribbon {
            position: absolute;
            top: 0.5rem;
            left: 0.5rem;
            background: rgba(185, 74, 74, 0.95);
            color: #fff;
            font-size: 0.65rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 0.2rem 0.5rem;
            border-radius: 999px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
            pointer-events: none;
        }
        .fav-star {
            position: absolute;
            bottom: 0.4rem;
            right: 0.4rem;
            background: rgba(0,0,0,0.35);
            color: rgba(255,255,255,0.95);
            border: none;
            width: 2rem;
            height: 2rem;
            border-radius: 999px;
            padding: 0;
            font-size: 1.6rem;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(0,0,0,0.3);
            transition: transform 0.1s ease, background 0.1s ease;
        }
        .fav-star:hover:not(:disabled) {
            background: rgba(0,0,0,0.55);
            transform: scale(1.08);
        }
        .fav-star.active { color: #ffcc00; }
        .fav-star:disabled { opacity: 0.6; cursor: wait; }
        .owned-mark {
            position: absolute;
            bottom: 0.4rem;
            right: 2.8rem;
            background: rgba(0,0,0,0.35);
            color: rgba(255,255,255,0.95);
            border: none;
            width: 2rem;
            height: 2rem;
            border-radius: 999px;
            padding: 0;
            font-size: 1.3rem;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(0,0,0,0.3);
            transition: transform 0.1s ease, background 0.1s ease;
        }
        .owned-mark:hover:not(:disabled) {
            background: rgba(0,0,0,0.55);
            transform: scale(1.08);
        }
        .owned-mark.active { color: #ffcc00; }
        .owned-mark:disabled { opacity: 0.6; cursor: wait; }
        .wishlist-mark {
            position: absolute;
            bottom: 0.4rem;
            right: 5.2rem;
            background: rgba(0,0,0,0.35);
            color: rgba(255,255,255,0.95);
            border: none;
            width: 2rem;
            height: 2rem;
            border-radius: 999px;
            padding: 0;
            font-size: 1.3rem;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(0,0,0,0.3);
            transition: transform 0.1s ease, background 0.1s ease;
        }
        .wishlist-mark:hover:not(:disabled) {
            background: rgba(0,0,0,0.55);
            transform: scale(1.08);
        }
        .wishlist-mark.active { color: #ffcc00; }
        .wishlist-mark:disabled { opacity: 0.6; cursor: wait; }
        .wishlist-mark svg { width: 1.25rem; height: 1.25rem; }
        .card .caption {
            padding: 0.85rem 1rem;
            display: flex;
            flex-direction: row;
            align-items: baseline;
            justify-content: space-between;
            gap: 0.5rem;
        }
        .card .caption .name {
            font-weight: 600;
            font-size: 1rem;
        }
        .card .caption .suffix {
            font-size: 0.8rem;
            color: #777;
            white-space: nowrap;
            color: #2a2a2a;
        }

        /* Modal */
        .modal {
            position: fixed;
            inset: 0;
            z-index: 200;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding: 1.5rem;
            overflow-y: auto;
        }
        .modal-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.55);
        }
        .modal:not([hidden]) .modal-backdrop { animation: modal-fade 0.18s ease-out; }
        .modal:not([hidden]) .modal-card { animation: modal-pop 0.2s ease-out; }
        @keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
        @keyframes modal-pop { from { opacity: 0; transform: scale(0.96) translateY(10px); } to { opacity: 1; transform: none; } }
        @media (prefers-reduced-motion: reduce) {
            .modal:not([hidden]) .modal-backdrop,
            .modal:not([hidden]) .modal-card { animation: none; }
        }
        .modal-card {
            position: relative;
            background: #fff;
            color: #2a2a2a;
            border-radius: 14px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
            width: 100%;
            max-width: 760px;
            margin: auto;
            zoom: 0.9;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        #view-mode { position: relative; }
        #view-mode:not([hidden]),
        #edit-mode:not([hidden]) {
            display: flex;
            flex-direction: column;
            min-height: 0;
        }
        .modal-close {
            position: absolute;
            top: 0.65rem;
            right: 0.65rem;
            background: rgba(0,0,0,0.5);
            color: #fff;
            border-radius: 999px;
            width: 32px;
            height: 32px;
            padding: 0;
            font-size: 1.2rem;
            line-height: 1;
            box-shadow: none;
            cursor: pointer;
            z-index: 1;
        }
        .modal-body { padding: 0 1.85rem 1.1rem; position: relative; flex: 1 1 auto; }
        .retired-badge {
            float: right;
            margin: 1.4rem 0 0 0.75rem;
            color: #b94a4a;
            font-style: italic;
            font-weight: 600;
            font-size: 0.95rem;
            letter-spacing: 0.02em;
        }
        .modal-image {
            width: 100%;
            height: 46vh;
            max-height: 440px;
            background: #fff;
            object-fit: contain;
            display: block;
            flex: 0 0 auto;
        }
        .modal-image-placeholder {
            width: 100%;
            height: 220px;
            background: #ede7f6;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #5a3a8f;
            font-weight: 600;
            flex: 0 0 auto;
        }
        /* Loading variant: a spinner instead of "No image" text, while the set's
           picture loads (so switching sets never lingers on the old image). */
        .modal-image-loading { position: relative; background: #f3f0fa; }
        .modal-image-loading::after {
            content: ''; width: 34px; height: 34px; border-radius: 50%;
            border: 3px solid rgba(90,58,143,0.22); border-top-color: #5a3a8f;
            animation: quiz-spin 0.8s linear infinite;
        }
        @media (max-height: 760px) {
            .modal-image { height: 40vh; max-height: 320px; }
            .modal-image-placeholder { height: 180px; }
        }
        .modal-card h2 {
            margin: 0.7rem 0 0.55rem;
            font-size: 1.55rem;
            color: #5a3a8f;
        }
        .view-header-row {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem 1.25rem;
            margin: 0 0 0.7rem;
            align-items: baseline;
        }
        .view-header-row > div {
            display: flex;
            align-items: baseline;
            gap: 0.5rem;
        }
        .view-header-row .hdr-stack {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.3rem;
            position: relative;
        }
        #view-extras {
            position: absolute;
            top: 100%;
            left: 0;
            margin-top: 0.3rem;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.3rem;
            white-space: nowrap;
        }
        .view-header-row .hdr-label {
            font-weight: 600;
            color: #777;
            text-transform: uppercase;
            font-size: 0.95rem;
            letter-spacing: 0.05em;
            unicode-bidi: isolate;
        }
        .view-header-row .hdr-value {
            font-size: 1.15rem;
            margin-left: 0.4rem;
            unicode-bidi: isolate;
        }
        /* Larger, airier info card + rating on desktop (mobile keeps compact). */
        @media (min-width: 701px) {
            .view-header-row { gap: 0.7rem 2rem; margin-bottom: 1.1rem; }
            .view-header-row .hdr-stack { row-gap: 0.65rem; column-gap: 1.2rem; }
            .view-header-row .hdr-label { font-size: 0.95rem; font-weight: 600; color: #8a8a8a; letter-spacing: 0.04em; }
            .view-header-row .hdr-value { font-size: 1.1rem; }
            .rating-label { font-size: 0.82rem; color: #9a9a9a; }
            .your-rating-label { font-size: 0.9rem; }
            .reviews-avg { font-size: 1.05rem; }
            .star-input button { font-size: 1.35rem; }
        }
        .hdr-stack-left > div > .hdr-label {
            display: inline-block;
            min-width: 3rem;
        }
        .hdr-stack-left > div > .hdr-value {
            margin-left: 1rem;
        }
        /* Align both detail columns' values (Set#/Year and Price/Minifigs/
           Theme/Suffix) by making each header stack a real 2-column grid, so
           values line up regardless of label width or language. The Theme/
           Suffix block (#view-extras) flows inline into the grid instead of
           floating. */
        @media (min-width: 561px) {
            .view-header-row .hdr-stack {
                display: grid;
                grid-template-columns: max-content max-content;
                column-gap: 1rem;
                row-gap: 0.3rem;
                align-items: baseline;
                position: static;
            }
            .view-header-row #view-extras,
            .view-header-row .hdr-stack > div:not([hidden]),
            .view-header-row #view-extras > div:not([hidden]) {
                display: contents;
            }
            .view-header-row .hdr-stack .hdr-label { min-width: 0; }
            .view-header-row .hdr-stack .hdr-value { margin-left: 0; }
        }
        .view-header-row .retired-tag {
            font-style: italic;
            color: #b94a4a;
        }
        @media (max-width: 560px) {
            .view-header-row {
                flex-direction: column;
                gap: 0.4rem;
            }
            .view-header-row .hdr-stack {
                width: 100%;
            }
            #view-extras {
                position: static;
                margin-top: 0;
            }
            .view-header-row div:has(> .hdr-label) {
                display: grid;
                grid-template-columns: 8rem 1fr;
                gap: 0 1rem;
                align-items: baseline;
            }
            .view-header-row .hdr-value,
            .hdr-stack-left > div > .hdr-value {
                margin-left: 0;
            }
            /* Shrink the detail card so it fits a phone screen without scrolling. */
            .modal { padding: 0.5rem; }
            .modal-image { height: 165px; max-height: 30vh; }
            .modal-image-placeholder { height: 120px; }
            .modal-body { padding: 0 1rem 1rem; }
            .modal-card h2 { font-size: 1.15rem; margin: 0.6rem 0 0.5rem; }
            .view-header-row { margin-bottom: 0.6rem; gap: 0.25rem; }
            .view-header-row .hdr-stack { gap: 0.2rem; }
            .view-header-row .hdr-label { font-size: 0.78rem; }
            .view-header-row .hdr-value { font-size: 0.98rem; }
        }

        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.75rem 1rem;
        }
        @media (max-width: 480px) { .form-grid { grid-template-columns: 1fr; } }
        .form-grid label {
            display: flex;
            flex-direction: column;
            font-size: 0.75rem;
            font-weight: 600;
            color: #5a3a8f;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .form-grid label.full { grid-column: 1 / -1; }
        .form-grid input, .form-grid select {
            margin-top: 0.3rem;
            padding: 0.55rem 0.7rem;
            font-size: 0.95rem;
            border: 1px solid #ccc;
            border-radius: 6px;
            color: #2a2a2a;
            background: #fff;
        }
        .form-grid input:focus, .form-grid select:focus {
            outline: none;
            border-color: #764ba2;
            box-shadow: 0 0 0 3px rgba(118, 75, 162, 0.2);
        }
        .modal-actions {
            margin-top: 1.25rem;
            display: flex;
            gap: 0.5rem;
            justify-content: flex-end;
            flex-wrap: wrap;
        }
        .modal-actions button {
            padding: 0.55rem 1.1rem;
            font-size: 0.9rem;
        }

        /* Sidebar nav */
        .sidebar-nav {
            padding: 0.5rem 0.75rem;
            border-bottom: 1px solid rgba(255,255,255,0.12);
            position: relative;
        }
        .admin-popover {
            position: absolute;
            top: 0.5rem;
            left: 100%;
            margin-left: 0.5rem;
            background: #2a1446;
            border-radius: 8px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
            padding: 0.35rem;
            z-index: 150;
            display: flex;
            flex-direction: column;
            min-width: 160px;
        }
        .admin-popover-item {
            background: none;
            color: rgba(255,255,255,0.9);
            border: none;
            text-align: left;
            padding: 0.5rem 0.75rem;
            font-size: 0.85rem;
            font-weight: 500;
            border-radius: 6px;
            box-shadow: none;
            cursor: pointer;
            white-space: nowrap;
        }
        .admin-popover-item:hover:not(:disabled) {
            background: rgba(255,255,255,0.12);
            transform: none;
            box-shadow: none;
        }
        @media (max-width: 700px), (max-height: 500px) {
            .admin-popover {
                left: 0;
                top: 100%;
                margin-left: 0;
                margin-top: 0.35rem;
            }
        }
        .sidebar-nav button {
            width: 100%;
            padding: 0.45rem 0.75rem;
            font-size: 0.8rem;
        }

        /* Users table */
        .users-table {
            width: 100%;
            border-collapse: collapse;
            background: rgba(255,255,255,0.97);
            color: #2a2a2a;
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 8px 24px rgba(0,0,0,0.25);
        }
        .users-table th, .users-table td {
            padding: 0.65rem 1rem;
            text-align: left;
            font-size: 0.9rem;
        }
        .users-table th {
            background: #5a3a8f;
            color: #fff;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-weight: 600;
        }
        .users-table tr:not(:last-child) td {
            border-bottom: 1px solid #eee;
        }
        .users-table .user-role-badge {
            display: inline-block;
            padding: 0.1rem 0.5rem;
            border-radius: 999px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
        }
        .users-table .user-role-badge.admin {
            background: #e8d5f5;
            color: #5a3a8f;
        }
        .users-table .user-role-badge.curator {
            background: #fff4d6;
            color: #8a5a00;
        }
        .users-table .user-role-badge.guest {
            background: #e3f2fd;
            color: #1565c0;
        }
        .users-table td .table-actions {
            display: flex;
            gap: 0.4rem;
        }
        .users-table td .table-actions button {
            padding: 0.3rem 0.7rem;
            font-size: 0.78rem;
        }

        /* Sort controls */
        .sidebar-sort {
            padding: 0.5rem 1rem;
            border-top: 1px solid rgba(255,255,255,0.12);
        }
        .sidebar-sort h3 {
            margin: 0 0 0.35rem;
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: rgba(255,255,255,0.5);
            font-weight: 600;
        }
        .sidebar-sort .sort-row {
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }
        .sidebar-sort select {
            flex: 1;
            padding: 0.3rem 0.4rem;
            font-size: 0.8rem;
            border: 1px solid rgba(255,255,255,0.3);
            border-radius: 6px;
            background: rgba(255,255,255,0.1);
            color: #fff;
            cursor: pointer;
            appearance: auto;
        }
        .sidebar-sort select option {
            background: #2a1446;
            color: #fff;
        }
        .sort-dir-btn {
            width: 28px;
            height: 28px;
            padding: 0;
            font-size: 0.75rem;
            border-radius: 6px;
            background: rgba(255,255,255,0.1);
            color: rgba(255,255,255,0.8);
            border: 1px solid rgba(255,255,255,0.3);
            cursor: pointer;
            box-shadow: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .sort-dir-btn:hover {
            background: rgba(255,255,255,0.2);
            transform: none;
            box-shadow: none;
        }

        /* "My Stuff" popover */
        #me-controls {
            position: relative;
        }
        .me-trigger {
            width: 100%;
            padding: 0.26rem 0.5rem;
            font-size: 0.8rem;
            border: 1px solid rgba(255,255,255,0.3);
            border-radius: 6px;
            background: rgba(255,255,255,0.1);
            color: #fff;
            cursor: pointer;
            box-shadow: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            text-align: left;
        }
        .me-trigger:hover {
            background: rgba(255,255,255,0.2);
            transform: none;
            box-shadow: none;
        }
        .me-chevron {
            font-size: 0.7rem;
            opacity: 0.7;
            margin-left: 0.4rem;
        }
        .me-popover {
            position: absolute;
            top: 0.5rem;
            left: 100%;
            margin-left: 0.5rem;
            background: #2a1446;
            border-radius: 8px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
            padding: 0.35rem;
            z-index: 150;
            display: flex;
            flex-direction: column;
            min-width: 160px;
        }
        /* The Minifigures/MOCs fly-outs can scroll; give them the same slim
           scrollbar as the sidebar theme list. */
        #minifigs-popover, #mocs-popover, #funfacts-popover {
            scrollbar-width: thin;
            scrollbar-color: rgba(255,255,255,0.25) transparent;
        }
        #minifigs-popover::-webkit-scrollbar, #mocs-popover::-webkit-scrollbar, #funfacts-popover::-webkit-scrollbar { width: 4px; }
        #minifigs-popover::-webkit-scrollbar-track, #mocs-popover::-webkit-scrollbar-track, #funfacts-popover::-webkit-scrollbar-track { background: transparent; }
        #minifigs-popover::-webkit-scrollbar-thumb, #mocs-popover::-webkit-scrollbar-thumb, #funfacts-popover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 4px; }
        #minifigs-popover::-webkit-scrollbar-thumb:hover, #mocs-popover::-webkit-scrollbar-thumb:hover, #funfacts-popover::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }
        /* Fun-fact items are full sentences, not short labels — let them wrap. */
        #funfacts-popover { max-width: 340px; }
        /* Stack the category buttons full-width so the whole row is clickable
           (they're nested in a wrapper div, so they'd otherwise be text-width). */
        #funfacts-items { display: flex; flex-direction: column; }
        .funfact-item { white-space: normal; line-height: 1.3; height: auto; }
        .funfact-cat { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: rgba(255,255,255,0.5); padding: 0.55rem 0.75rem 0.15rem; }
        .funfact-cat:first-child { padding-top: 0.2rem; }
        .funfact-static { white-space: normal; line-height: 1.3; padding: 0.4rem 0.75rem; font-size: 0.82rem; color: rgba(255,255,255,0.88); cursor: default; }
        .funfact-cat-btn { font-weight: 600; }
        .funfact-back { opacity: 0.7; font-weight: 600; }
        .funfact-add { color: #7fd1ff; font-weight: 600; }
        .funfact-row { display: flex; align-items: flex-start; gap: 0.25rem; }
        .funfact-row .funfact-text { flex: 1; min-width: 0; overflow-wrap: break-word; word-break: break-word; }
        .funfact-tool { background: none; border: none; box-shadow: none; color: rgba(255,255,255,0.55); cursor: pointer; padding: 0 0.2rem; font-size: 0.85rem; line-height: 1.3; flex: 0 0 auto; }
        .funfact-tool:hover { color: #fff; background: none; transform: none; box-shadow: none; }
        .funfact-tool-del:hover { color: #ff8a8a; }
        /* Fun Facts full-screen view */
        .funfacts-head { text-align: center; }
        .funfacts-subtitle { margin: 0.15rem 0 0; color: rgba(255,255,255,0.72); font-size: 0.95rem; }
        .funfacts-tabs { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin: 1.2rem 0 1.6rem; }
        .funfacts-tab { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.22); border-radius: 999px; padding: 0.5rem 1.25rem; font-size: 0.92rem; font-weight: 600; cursor: pointer; transition: background 0.12s ease, transform 0.08s ease; }
        .funfacts-tab:hover { background: rgba(255,255,255,0.22); transform: none; box-shadow: none; }
        .funfacts-tab.active { background: #fff; color: #1a3a6b; border-color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.22); }
        .funfacts-list { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.7rem; }
        .funfact-card { background: #fff; color: #26263a; border-radius: 16px; padding: 0.95rem 1.15rem; font-size: 1rem; line-height: 1.5; box-shadow: 0 4px 16px rgba(15, 30, 60, 0.18); display: flex; align-items: center; gap: 0.85rem; border: 1px solid rgba(0,0,0,0.04); }
        .funfact-card .funfact-card-text { flex: 1; min-width: 0; overflow-wrap: break-word; word-break: break-word; }
        .funfact-emoji { flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; background: linear-gradient(135deg, #eaf2ff 0%, #d8e8ff 100%); box-shadow: inset 0 0 0 1px rgba(41, 128, 185, 0.12); }
        .funfact-arrow { flex: 0 0 auto; color: #b7c2d6; font-size: 1.1rem; transform: translateX(-3px); opacity: 0; transition: opacity 0.12s ease, transform 0.12s ease; }
        .funfact-card.clickable { cursor: pointer; transition: transform 0.1s ease, box-shadow 0.1s ease; }
        .funfact-card.clickable:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15, 30, 60, 0.28); }
        .funfact-card.clickable:hover .funfact-arrow { opacity: 1; transform: translateX(0); }
        .funfact-card-tools { display: flex; gap: 0.15rem; flex: 0 0 auto; align-self: flex-start; }
        .funfact-card .funfact-tool { color: #a2a2b6; font-size: 0.95rem; }
        .funfact-card .funfact-tool:hover { color: #333; }
        .funfact-card .funfact-tool-del:hover { color: #c0392b; }
        .funfact-add-btn { align-self: center; background: rgba(255,255,255,0.14); color: #fff; border: 1.5px dashed rgba(255,255,255,0.45); border-radius: 12px; padding: 0.65rem 1.3rem; font-weight: 600; cursor: pointer; margin-bottom: 0.4rem; transition: background 0.12s ease; }
        .funfact-add-btn:hover { background: rgba(255,255,255,0.26); }
        [data-theme="dark"] .funfact-card { background: #1b2233; color: #e7e9f0; border-color: rgba(255,255,255,0.06); }
        [data-theme="dark"] .funfact-emoji { background: linear-gradient(135deg, #2a3550 0%, #1f2942 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }
        /* Browse: Themes / Designers card grid */
        .browse-grid { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.7rem; }
        .browse-card { display: flex; align-items: center; gap: 0.7rem; text-align: left; background: #fff; color: #26263a; border: 1px solid rgba(0,0,0,0.05); border-radius: 12px; padding: 0.7rem 0.9rem; cursor: pointer; box-shadow: 0 2px 8px rgba(15,30,60,0.12); transition: transform 0.08s ease, box-shadow 0.08s ease; }
        .browse-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,30,60,0.22); }
        .browse-icon { font-size: 1.4rem; flex: 0 0 auto; }
        .browse-name { flex: 1; font-weight: 600; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .browse-count { flex: 0 0 auto; font-size: 0.85rem; color: #7a7a90; background: #f0f0f7; border-radius: 999px; padding: 0.1rem 0.5rem; }
        [data-theme="dark"] .browse-card { background: #1b2233; color: #e7e9f0; border-color: rgba(255,255,255,0.06); }
        [data-theme="dark"] .browse-count { background: #2a3147; color: #b9c0d4; }
        /* Browse: LEGO Colors palette */
        .colors-palette { max-width: 1000px; margin: 0 auto; padding-bottom: 2rem; }
        .colors-group { margin: 1.4rem 0 0.8rem; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.92); }
        .colors-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 0.85rem; }
        .color-swatch { background: none; border: none; padding: 0; margin: 0; cursor: pointer; display: flex; flex-direction: column; gap: 0.3rem; text-align: left; }
        .color-chip { --c: #888; background: var(--c); border-radius: 14px; min-height: 108px; display: flex; align-items: flex-end; padding: 0.6rem 0.7rem; font-weight: 700; font-size: 0.85rem; line-height: 1.2; box-shadow: 0 3px 10px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(255,255,255,0.10); transition: transform 0.1s ease, box-shadow 0.1s ease; overflow: hidden; }
        .color-swatch:hover .color-chip { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0,0,0,0.32); }
        .color-swatch.is-trans .color-chip { background: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0.02) 46%), var(--c); }
        .color-name { text-shadow: 0 1px 2px rgba(0,0,0,0.28); overflow-wrap: anywhere; }
        .color-hex { font-size: 0.72rem; color: rgba(255,255,255,0.82); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; padding-left: 0.15rem; }
        /* Color info-card modal */
        .color-detail-hero { height: 150px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10), 0 4px 14px rgba(0,0,0,0.18); margin-bottom: 1rem; }
        .color-detail-props { display: flex; flex-direction: column; margin: 0.4rem 0 1.1rem; }
        .color-detail-props .prop { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.92rem; padding: 0.5rem 0.1rem; border-bottom: 1px solid rgba(0,0,0,0.07); }
        .color-detail-props .prop:last-child { border-bottom: none; }
        .color-detail-props .prop-label { color: #6a6a80; font-weight: 600; }
        .color-detail-props .prop-value { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
        [data-theme="dark"] .color-detail-props .prop { border-color: rgba(255,255,255,0.09); }
        [data-theme="dark"] .color-detail-props .prop-label { color: #9aa0b4; }
        .color-copy-btn { width: 100%; padding: 0.7rem 1rem; border: none; border-radius: 10px; background: #2e2456; color: #fff; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; transition: background 0.12s ease; }
        .color-copy-btn:hover { background: #3a2e6e; }
        /* Browse: by year */
        .year-grid { max-width: 760px; margin: 0 auto; text-align: center; }
        .year-decade { color: rgba(255,255,255,0.85); font-weight: 700; font-size: 1.05rem; margin: 1.1rem 0 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.15); padding-bottom: 0.25rem; text-align: left; }
        .year-chip { display: inline-flex; align-items: baseline; gap: 0.35rem; background: #fff; color: #26263a; border: none; border-radius: 10px; padding: 0.45rem 0.7rem; margin: 0.25rem; cursor: pointer; box-shadow: 0 2px 6px rgba(15,30,60,0.12); transition: transform 0.08s ease; }
        .year-chip:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(15,30,60,0.2); }
        .year-num { font-weight: 700; }
        .year-count { font-size: 0.75rem; color: #8a8aa0; }
        [data-theme="dark"] .year-chip { background: #1b2233; color: #e7e9f0; }
        .add-moc-note { color: #6a6a80; font-size: 0.9rem; line-height: 1.45; margin: 0 0 0.9rem; }
        [data-theme="dark"] .add-moc-note { color: #a6acc0; }
        .add-moc-field { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.35rem; }
        .add-moc-label { font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 0.45rem; }
        .add-moc-req { font-style: normal; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #c0392b; background: rgba(192,57,43,0.12); border-radius: 999px; padding: 0.05rem 0.45rem; }
        .add-moc-opt { font-style: normal; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: #9a9aae; }
        .add-moc-hint { color: #6a6a80; font-size: 0.78rem; line-height: 1.35; }
        [data-theme="dark"] .add-moc-hint { color: #9aa0b4; }
        [data-theme="dark"] .add-moc-opt { color: #8a90a4; }
        @media (max-width: 700px), (max-height: 500px) {
            /* Anchored to the sidebar (top bar), the popout drops just below it and
               escapes the trigger strip's horizontal-scroll clipping. */
            .me-popover {
                left: 0.5rem;
                right: auto;
                top: 100%;
                margin: 0.25rem 0 0;
                max-width: calc(100vw - 1rem);
                max-height: 62vh;
                overflow-y: auto;
            }
        }
        .me-popover-item {
            background: none;
            color: rgba(255,255,255,0.9);
            border: none;
            text-align: left;
            padding: 0.5rem 0.75rem;
            font-size: 0.85rem;
            font-weight: 500;
            border-radius: 6px;
            box-shadow: none;
            cursor: pointer;
            white-space: nowrap;
        }
        .me-popover-item:hover:not(:disabled) {
            background: rgba(255,255,255,0.12);
            transform: none;
            box-shadow: none;
        }
        .me-popover-item.active {
            background: rgba(255,255,255,0.18);
            color: #fff;
        }
        /* Pin the Discover + My-stuff fly-outs to the bottom of the screen (just
           right of the 260px sidebar) so they never run off-screen. Desktop only
           — below 700px the sidebar is a top bar and the mobile rules apply. */
        @media (min-width: 701px) {
            #me-popover {
                position: fixed;
                left: 260px;
                bottom: 1rem;
                top: auto;
                max-height: calc(100vh - 2rem);
                overflow-y: auto;
            }
            /* Discover / Our Community pop out beside their own sidebar button,
               vertically centred on that button's row (positioned within the
               section, which is position:relative) — not the screen, not the
               bottom. */
            #discover-popover,
            #community-popover,
            #colors-popover {
                position: absolute;
                left: 100%;
                top: 50%;
                bottom: auto;
                margin-left: 0.4rem;
                transform: translateY(-50%);
                max-height: calc(100vh - 2rem);
                overflow-y: auto;
            }
            /* Minifigures and MOCs can have many themes, so their popouts are
               positioned by JS (positionMinifigsPopover / positionMocsPopover)
               beside the button and clamped to the viewport; this caps their
               height and gives them an internal scrollbar. */
            #minifigs-popover,
            #mocs-popover,
            #funfacts-popover {
                position: fixed;
                margin-left: 0;
                bottom: auto;
                transform: none;
                max-height: calc(100vh - 1rem);
                overflow-y: auto;
            }
        }

        /* Search row */
        .search-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
        }
        /* On mobile, put the search bar (and refresh) on top and move the
           Pieces/Price/Year filters onto their own row beneath it. */
        /* The view options (refresh / density / select) read as one cluster
           inside a single pill rather than three separate floating circles. */
        .utility-group {
            display: flex;
            align-items: center;
            gap: 0.1rem;
            flex-shrink: 0;
            background: rgba(255,255,255,0.97);
            border-radius: 999px;
            box-shadow: 0 4px 14px rgba(0,0,0,0.2);
            padding: 0.2rem;
        }
        .utility-group .refresh-btn { background: transparent; box-shadow: none; width: 36px; height: 36px; }
        .utility-group .refresh-btn:hover { background: rgba(42,20,70,0.08); transform: none; box-shadow: none; }
        .utility-group .density-btn.active,
        .utility-group .select-btn.active { background: #ffd43b; color: #2a1446; }
        @media (max-width: 600px) {
            .search-row {
                flex-wrap: wrap;
            }
            /* Search bar full width on top; filters and utilities wrap below. */
            .search-row .search-wrap {
                order: 0;
                flex: 1 1 100%;
                max-width: none;
            }
            .range-wrap { order: 1; }
            .utility-group { order: 2; }
        }
        .search-wrap {
            flex: 1;
            max-width: 560px;
            display: flex;
            align-items: center;
            background: rgba(255,255,255,0.97);
            border-radius: 999px;
            box-shadow: 0 4px 14px rgba(0,0,0,0.2);
        }
        .search-wrap:focus-within {
            box-shadow: 0 4px 14px rgba(0,0,0,0.2), 0 0 0 3px rgba(118,75,162,0.3);
        }
        .search-input-wrap {
            position: relative;
            flex: 1;
            min-width: 0;
            display: flex;
            align-items: center;
        }
        .search-wrap input {
            width: 100%;
            padding: 0.6rem 2.2rem 0.6rem 1rem;
            font-size: 0.95rem;
            border: none;
            border-radius: 999px;
            background: transparent;
            color: #2a2a2a;
        }
        .search-wrap input:focus {
            outline: none;
        }
        .search-wrap input::placeholder {
            color: #999;
        }
        .search-field {
            flex-shrink: 0;
            border: none;
            border-left: 1px solid rgba(0,0,0,0.14);
            background: transparent;
            color: #2a1446;
            font-size: 0.88rem;
            font-weight: 600;
            padding: 0.55rem 1.9rem 0.55rem 0.85rem;
            cursor: pointer;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a1446' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.7rem center;
            background-size: 0.62rem;
        }
        .search-field:focus { outline: none; }
        .search-field option { color: #2a2a2a; }
        .search-clear {
            position: absolute;
            right: 0.45rem;
            top: 50%;
            transform: translateY(-50%);
            width: 22px;
            height: 22px;
            padding: 0;
            border: none;
            border-radius: 50%;
            background: #ccc;
            color: #fff;
            font-size: 0.8rem;
            line-height: 1;
            cursor: pointer;
            display: none;
            align-items: center;
            justify-content: center;
            box-shadow: none;
        }
        .search-clear:hover:not(:disabled) {
            background: #999;
            transform: translateY(-50%);
            box-shadow: none;
        }
        .refresh-btn {
            width: 38px;
            height: 38px;
            padding: 0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .refresh-btn svg {
            width: 20px;
            height: 20px;
        }
        @media (max-width: 600px) {
            .refresh-btn svg {
                width: 24px;
                height: 24px;
            }
        }

        /* Range filters (pieces, year) */
        .range-wrap {
            position: relative;
            flex-shrink: 0;
        }
        .range-trigger {
            padding: 0.55rem 1rem;
            font-size: 0.9rem;
            border: none;
            border-radius: 999px;
            background: rgba(255,255,255,0.97);
            color: #2a2a2a;
            box-shadow: 0 4px 14px rgba(0,0,0,0.2);
            white-space: nowrap;
            cursor: pointer;
        }
        .range-trigger.active {
            background: #ffd43b;
            color: #2a1446;
            font-weight: 600;
        }
        /* Match the Add Set button to the filter buttons' size so it takes
           less of the search row. */
        #add-btn {
            padding: 0.55rem 1rem;
            font-size: 0.9rem;
        }
        .range-popover {
            position: absolute;
            top: calc(100% + 0.4rem);
            left: 0;
            background: #2a1446;
            border-radius: 10px;
            box-shadow: 0 10px 28px rgba(0,0,0,0.4);
            padding: 0.75rem;
            z-index: 150;
            min-width: 240px;
        }
        .sort-popover { min-width: 210px; }
        .sort-popover .sort-row { display: flex; align-items: center; gap: 0.4rem; }
        .sort-popover select {
            flex: 1;
            padding: 0.4rem 0.5rem;
            font-size: 0.85rem;
            border: 1px solid rgba(255,255,255,0.3);
            border-radius: 6px;
            background: rgba(255,255,255,0.1);
            color: #fff;
            cursor: pointer;
            appearance: auto;
        }
        .sort-popover select option { background: #2a1446; color: #fff; }
        .minmax-group { margin-bottom: 0.65rem; }
        .minmax-group:last-of-type { margin-bottom: 0.4rem; }
        .minmax-label {
            display: block;
            font-size: 0.68rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: rgba(255,255,255,0.6);
            margin-bottom: 0.25rem;
        }
        .range-row {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 0.55rem;
        }
        .range-row label {
            flex: 1;
            display: flex;
            flex-direction: column;
            font-size: 0.75rem;
            color: rgba(255,255,255,0.75);
            gap: 0.25rem;
        }
        .range-row input {
            padding: 0.45rem 0.6rem;
            font-size: 0.9rem;
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 6px;
            background: rgba(255,255,255,0.95);
            color: #2a2a2a;
            width: 100%;
            box-sizing: border-box;
        }
        .range-row input:focus {
            outline: none;
            border-color: #ffd43b;
        }
        .range-clear {
            width: 100%;
            padding: 0.4rem;
            font-size: 0.8rem;
            border: 1px solid rgba(255,255,255,0.25);
            border-radius: 6px;
            background: transparent;
            color: rgba(255,255,255,0.9);
            cursor: pointer;
            box-shadow: none;
        }
        .range-clear:hover:not(:disabled) {
            background: rgba(255,255,255,0.1);
            box-shadow: none;
            transform: none;
        }
        @media (max-width: 600px) {
            .range-trigger { padding: 0.5rem 0.8rem; font-size: 0.85rem; }
            .range-popover { min-width: 220px; }
        }

        /* Collection stats line (top-left of the sticky header) */
        .stats-line {
            text-align: left;
            font-size: 0.8rem;
            color: rgba(255,255,255,0.85);
            letter-spacing: 0.02em;
            margin: 0 0 0.4rem;
            /* Always one line — never wrap. If the text is too wide for the header,
               fitStatsLine() shrinks the font until it fits (no sideways scroll). */
            white-space: nowrap;
            overflow: hidden;
        }
        @media (min-width: 601px) {
            .stats-line {
                text-align: center;
                margin-left: 0;
                font-size: 0.95rem;
            }
        }

        /* Filter summary (results count + clear all) */
        .filter-summary {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.75rem;
            margin: 0.4rem 0 0.5rem;
            font-size: 0.85rem;
            color: rgba(255,255,255,0.9);
            flex-wrap: wrap;
        }
        .filter-summary .count {
            background: rgba(0,0,0,0.2);
            padding: 0.25rem 0.75rem;
            border-radius: 999px;
        }
        .filter-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
        .filter-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            background: rgba(255,255,255,0.18);
            color: #fff;
            padding: 0.2rem 0.4rem 0.2rem 0.7rem;
            border-radius: 999px;
            font-size: 0.8rem;
        }
        .filter-chip-x {
            background: none;
            border: none;
            color: rgba(255,255,255,0.8);
            cursor: pointer;
            font-size: 0.7rem;
            line-height: 1;
            padding: 0.1rem 0.2rem;
            box-shadow: none;
        }
        .filter-chip-x:hover { color: #fff; transform: none; box-shadow: none; }
        .filter-summary .clear-all {
            background: none;
            border: none;
            color: #ffd43b;
            text-decoration: underline;
            cursor: pointer;
            font-size: 0.85rem;
            padding: 0;
            box-shadow: none;
        }
        .filter-summary .clear-all:hover {
            background: none;
            color: #fff;
            box-shadow: none;
            transform: none;
        }
        /* On mobile, hide the filter summary (set count + clear-filters link). */
        @media (max-width: 600px) {
            .filter-summary { display: none; }
            .quick-chips { display: none; }
        }

        /* Image lightbox */
        .lightbox {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.92);
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            cursor: zoom-out;
        }
        .lightbox img {
            max-width: 100vw;
            max-height: 100vh;
            object-fit: contain;
        }
        .lightbox-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: rgba(255,255,255,0.15);
            border: none;
            color: #fff;
            width: 40px;
            height: 40px;
            padding: 0;
            border-radius: 50%;
            font-size: 1.5rem;
            line-height: 1;
            cursor: pointer;
            box-shadow: none;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
        }
        .lightbox-close:hover:not(:disabled) {
            background: rgba(255,255,255,0.25);
            transform: none;
            box-shadow: none;
        }
        .modal-image { cursor: zoom-in; }

        /* Prev/next chevrons in the set modal */
        .set-nav {
            display: flex;
            position: fixed;
            top: 50%;
            transform: translateY(-50%);
            width: 44px;
            height: 44px;
            padding: 0;
            background: rgba(0,0,0,0.55);
            color: #fff;
            border: none;
            border-radius: 50%;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            line-height: 1;
            z-index: 1500;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }
        .set-nav svg { width: 22px; height: 22px; display: block; }
        .set-nav-prev { left: max(0.5rem, calc(50% - 402px)); }
        .set-nav-next { right: max(0.5rem, calc(50% - 402px)); }
        .set-nav:disabled { opacity: 0.25; cursor: default; }
        .set-nav:hover:not(:disabled) {
            background: rgba(0,0,0,0.75);
            transform: translateY(-50%);
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }


        [hidden] { display: none !important; }

        /* Toast notifications */
        .toast-container {
            position: fixed;
            bottom: 1.5rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            z-index: 400;
            pointer-events: none;
        }
        .toast {
            pointer-events: auto;
            cursor: pointer;
            max-width: 90vw;
            padding: 0.6rem 1.1rem;
            border-radius: 999px;
            background: rgba(40, 20, 70, 0.96);
            color: #fff;
            font-size: 0.9rem;
            font-weight: 500;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
            opacity: 0;
            transform: translateY(12px);
            transition: opacity 0.25s ease, transform 0.25s ease;
        }
        .toast.show { opacity: 1; transform: translateY(0); }
        .toast-success { background: rgba(34, 130, 74, 0.96); }
        .toast-error { background: rgba(176, 58, 58, 0.96); }
        @media (prefers-reduced-motion: reduce) {
            .toast { transition: opacity 0.25s ease; transform: none; }
            .toast.show { transform: none; }
        }

        /* Small dark-mode toggle, sitting to the right of My Profile */
        .sidebar-user-actions { display: flex; gap: 0.5rem; align-items: center; }
        .sidebar-user-actions #profile-btn,
        .sidebar-user-actions .sidebar-not-logged-in { flex: 1; }
        #theme-toggle {
            flex: 0 0 auto;
            width: 32px;
            height: 32px;
            padding: 0;
            font-size: 1rem;
            line-height: 1;
            background: transparent;
            color: #fff;
            border: 1px solid rgba(255,255,255,0.5);
            border-radius: 50%;
            box-shadow: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #theme-toggle:hover { background: rgba(255,255,255,0.12); transform: none; box-shadow: none; }

        /* Collection dashboard */
        .dash-completion { display: flex; align-items: center; gap: 1rem; margin: 0.25rem 0 1.25rem; }
        .dash-ring-wrap { position: relative; width: 84px; height: 84px; flex: 0 0 auto; }
        .dash-ring { width: 84px; height: 84px; transform: rotate(-90deg); }
        .dash-ring .ring-track { fill: none; stroke: rgba(0, 0, 0, 0.1); stroke-width: 3.2; }
        .dash-ring .ring-fill { fill: none; stroke: #5a3a8f; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray 0.5s ease; }
        .dash-ring-label { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 1.05rem; color: #5a3a8f; }
        .dash-completion-text { font-size: 0.9rem; color: #777; }
        .dash-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin: 0.5rem 0 1.25rem; }
        .dash-tile { background: #ede7f6; border-radius: 10px; padding: 0.9rem 0.5rem; text-align: center; }
        .dash-tile .num { font-size: 1.5rem; font-weight: 700; color: #5a3a8f; line-height: 1.1; }
        .dash-tile .lbl { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: #777; margin-top: 0.3rem; }
        .dash-themes { font-size: 0.85rem; }
        .dash-bar-row { display: grid; grid-template-columns: minmax(0, 9rem) 1fr max-content; align-items: center; gap: 0.6rem; margin-bottom: 0.45rem; }
        .dash-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .dash-bar-track { background: rgba(0, 0, 0, 0.08); border-radius: 999px; height: 0.6rem; overflow: hidden; }
        .dash-bar-fill { height: 100%; background: #5a3a8f; border-radius: 999px; }
        .dash-bar-val { color: #777; font-variant-numeric: tabular-nums; text-align: right; min-width: 1.4rem; }
        #dash-empty { text-align: center; color: #777; padding: 1rem 0; }
        .dash-actions { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; }

        /* "My copy" ownership details in the set modal */
        .owned-detail { margin: 0 0 1.25rem; border-top: 1px solid #eee; padding-top: 1rem; }
        .owned-detail-title {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 0.4rem;
            width: 100%;
            margin: 0;
            padding: 0.15rem 0;
            background: transparent;
            border: none;
            border-radius: 0;
            box-shadow: none;
            font-size: 0.8rem;
            font-weight: 700;
            color: #5a3a8f;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            cursor: pointer;
        }
        .owned-detail-title .od-caret {
            width: 15px;
            height: 15px;
            flex-shrink: 0;
            transition: transform 0.2s ease;
        }
        .owned-detail-title[aria-expanded="true"] .od-caret { transform: rotate(180deg); }
        .owned-detail-body { margin-top: 0.85rem; }
        .owned-detail .form-grid textarea {
            margin-top: 0.3rem;
            padding: 0.55rem 0.7rem;
            font-size: 0.95rem;
            border: 1px solid #ccc;
            border-radius: 6px;
            color: #2a2a2a;
            background: #fff;
            font-family: inherit;
            resize: vertical;
        }
        .owned-detail-foot { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
        .od-status { font-size: 0.85rem; color: #777; }
        .od-fields {
            display: grid;
            grid-template-columns: max-content 1fr;
            gap: 0.4rem 1rem;
            align-items: baseline;
            margin: 0 0 0.85rem;
        }
        .od-fields > div { display: contents; }
        .od-fields .od-label {
            font-weight: 600;
            color: #777;
            text-transform: uppercase;
            font-size: 0.95rem;
            letter-spacing: 0.05em;
        }
        .od-fields .od-value { font-size: 1.15rem; white-space: pre-wrap; }

        /* Loading skeletons */
        .card.skeleton { cursor: default; pointer-events: none; }
        .card.skeleton .thumb { background: rgba(140, 140, 165, 0.22); }
        .card.skeleton .skeleton-line { height: 0.95rem; border-radius: 5px; margin: 0.9rem 1rem 1.1rem; background: rgba(140, 140, 165, 0.22); }
        .card.skeleton .thumb,
        .card.skeleton .skeleton-line { animation: skeleton-pulse 1.2s ease-in-out infinite; }
        @keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

        .analytics-subhead { margin: 1.75rem 0 0.6rem; color: #fff; font-size: 1.1rem; }
        .issue-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
        .issue-chip {
            font-size: 0.72rem;
            padding: 0.15rem 0.55rem;
            border-radius: 999px;
            background: rgba(240, 180, 41, 0.22);
            color: #f7c948;
            white-space: nowrap;
        }
        #needs-table tbody tr:hover { background: rgba(255,255,255,0.06); }

        /* Empty state */
        .empty-state { text-align: center; padding: 3rem 1rem; }
        .empty-icon { font-size: 2.5rem; margin-bottom: 0.5rem; opacity: 0.85; }
        .empty-msg { color: rgba(255, 255, 255, 0.85); font-size: 1rem; }

        /* ===== Dark mode ===== */
        [data-theme="dark"] body,
        [data-theme="dark"] .main-sticky-header {
            background: linear-gradient(135deg, #0b1322 0%, #102134 50%, #0c2a39 100%);
            background-attachment: fixed;
        }
        [data-theme="dark"] .card,
        [data-theme="dark"] .login-card,
        [data-theme="dark"] .modal-card,
        [data-theme="dark"] .users-table {
            background: #1b2233;
            color: #e7e9f0;
        }
        [data-theme="dark"] .share-set-btn {
            background: rgba(195, 174, 240, 0.14);
            border-color: rgba(195, 174, 240, 0.3);
            color: #c3aef0;
        }
        [data-theme="dark"] .card .thumb,
        [data-theme="dark"] .modal-image-placeholder {
            background: #2a3147;
            color: #c4b8e8;
        }
        [data-theme="dark"] .modal-image { background: #0e1320; }
        [data-theme="dark"] .login-card h2,
        [data-theme="dark"] .login-card-header h2,
        [data-theme="dark"] .modal-card h2,
        [data-theme="dark"] .login-card label,
        [data-theme="dark"] .form-grid label {
            color: #c3aef0;
        }
        [data-theme="dark"] .card .caption .suffix,
        [data-theme="dark"] .view-header-row .hdr-label { color: #98a1b6; }
        [data-theme="dark"] .login-card input,
        [data-theme="dark"] .form-grid input,
        [data-theme="dark"] .form-grid select {
            background: #2a3147;
            color: #e7e9f0;
            border-color: #3c4760;
        }
        [data-theme="dark"] .users-table th { background: #3a2f5c; }
        [data-theme="dark"] .users-table tr:not(:last-child) td { border-bottom-color: #2c3346; }
        [data-theme="dark"] #profile-status { color: #98a1b6 !important; }
        [data-theme="dark"] .dash-tile { background: #2a3147; }
        [data-theme="dark"] .dash-tile .num { color: #c3aef0; }
        [data-theme="dark"] .dash-tile .lbl,
        [data-theme="dark"] .dash-bar-val,
        [data-theme="dark"] #dash-empty { color: #98a1b6; }
        [data-theme="dark"] .dash-bar-track { background: rgba(255, 255, 255, 0.1); }
        [data-theme="dark"] .dash-bar-fill { background: #8a6fc0; }
        [data-theme="dark"] .dash-ring .ring-track { stroke: rgba(255, 255, 255, 0.12); }
        [data-theme="dark"] .dash-ring .ring-fill { stroke: #8a6fc0; }
        [data-theme="dark"] .dash-ring-label { color: #c3aef0; }
        [data-theme="dark"] .dash-completion-text { color: #98a1b6; }
        [data-theme="dark"] .owned-detail { border-top-color: #2c3346; }
        [data-theme="dark"] .owned-detail-title { color: #c3aef0; }
        [data-theme="dark"] .owned-detail .form-grid textarea { background: #2a3147; color: #e7e9f0; border-color: #3c4760; }
        [data-theme="dark"] .od-status { color: #98a1b6; }
        [data-theme="dark"] .od-fields .od-label { color: #98a1b6; }