.art-related-box + .art-related-box { margin-top: 16px; }
        .cr-subject-hero-img {
            max-width: 100%;
            border-radius: var(--radius-lg);
            margin-bottom: 20px;
        }
        .cr-test-grid, .cr-video-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 16px;
            margin-bottom: 24px;
        }
        .cr-test-card, .cr-video-card {
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 14px 16px;
            background: #fff;
            text-decoration: none;
            display: block;
            transition: background 0.15s, border-color 0.15s, transform 0.15s ease-out;
        }
        .cr-test-card:hover, .cr-video-card:hover {
            background: #fdf6e8;
            border-color: var(--accent);
            transform: translateY(-3px);
        }
        .cr-test-card img {
            width: 100%;
            border-radius: 6px;
            margin-bottom: 8px;
        }
        .cr-test-card-name {
            font-family: var(--font-display);
            font-size: 15px;
            font-weight: 700;
            color: var(--navy);
        }
        .cr-test-card-meta {
            font-size: 12px;
            color: var(--text-muted);
            font-family: var(--font-body);
            margin-top: 4px;
        }
        .cr-video-card img {
            width: 100%;
            border-radius: 6px;
            margin-bottom: 8px;
        }
        .cr-video-card-title {
            font-family: var(--font-display);
            font-size: 14px;
            font-weight: 600;
            color: var(--navy);
        }
        .cr-video-card-duration {
            font-size: 12px;
            color: var(--text-muted);
            font-family: var(--font-body);
            margin-top: 2px;
        }
        .cr-section-title {
            font-family: var(--font-display);
            font-size: 20px;
            font-weight: 700;
            color: var(--navy);
            margin: 24px 0 14px;
        }
        .cr-learn-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 18px;
            margin-bottom: 24px;
        }
        .cr-learn-card {
            border: 1px solid #e5e9f0;
            border-radius: 12px;
            overflow: hidden;
            background: #fff;
            text-decoration: none;
            display: flex;
            flex-direction: column;
            box-shadow: 0 1px 2px rgba(15, 39, 68, 0.04);
            transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
        }
        /* Same gold-tint hover as the rest of the site (dashboard,
           Practice Tests, Watch, Certificates cards) -- 2026-08-03. */
        .cr-learn-card:hover {
            background: #fdf6e8;
            border-color: var(--accent);
            transform: translateY(-3px);
            box-shadow: var(--shadow-md);
        }
        .cr-learn-card img {
            aspect-ratio: 16 / 9;
            object-fit: cover;
            display: block;
        }
        /* Fallback for items with no ContentImage/TestSetImage/VideoImage
           -- without this, imageless cards (Tests/Articles/Notes rows
           older than the image-upload feature) rendered as a much
           shorter, mostly-blank box next to their image-bearing
           siblings, breaking the grid's row rhythm. Same aspect-ratio
           as .cr-learn-card img so every card is the same height
           regardless of whether it has a real thumbnail, and reuses
           each type's own badge color (darkened) so it still reads as
           "belonging" to that content type rather than a generic gray box. */
        .cr-learn-card-placeholder {
            width: 100%;
            aspect-ratio: 16 / 9;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .cr-learn-card-placeholder span {
            font-family: var(--font-display);
            font-size: 28px;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.9);
        }
        .cr-learn-card-placeholder.article { background: linear-gradient(135deg, #7b70e0, #3c3489); }
        .cr-learn-card-placeholder.notes { background: linear-gradient(135deg, #1fae82, #085041); }
        .cr-learn-card-placeholder.tutorial { background: linear-gradient(135deg, #e17a4d, #712b13); }
        .cr-learn-card-placeholder.interview { background: linear-gradient(135deg, #d8598c, #72243e); }
        .cr-learn-card-placeholder.test { background: linear-gradient(135deg, #f0a83a, #854f0b); }
        .cr-learn-card-placeholder.video { background: linear-gradient(135deg, #4d9de0, #0c447c); }
        .cr-learn-card-placeholder.topic { background: linear-gradient(135deg, #6b7f94, #33475b); }
        /* Topic cards sourced from the topic-dense query -- icon on a
           flat pastel swatch instead of the plain lettered
           placeholder above. Deliberately NOT the Subject Area
           carousel's darker gradient + white-icon-chip treatment --
           flat, lighter, dark icon -- so the two card types read as
           visually distinct at a glance. See TopicIconSwatchHtml in
           cr-subject.aspx.vb. */
        .cr-learn-card-swatch {
            width: 100%;
            aspect-ratio: 16 / 9;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* Circular chip behind the icon, same visual anchor the
           Subject Area carousel's icon has -- flat pastel swatch
           alone read as empty/washed out without it. */
        .cr-learn-card-topic-chip {
            width: 110px;
            height: 110px;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.06);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* mask-image, not <img>, so background-color gives an exact
           target hex regardless of whatever color the source SVG
           happens to be (white-stroke Tabler default, or a custom
           admin-uploaded icon) -- the SVG is used purely as a
           silhouette. A CSS filter chain approximating a target hue
           was considered and dropped: correct-by-construction beats
           trial-and-error tuning. See TopicIconSwatchHtml, which
           sets --topic-icon-url per row. */
        .cr-learn-card-topic-icon {
            width: 80px;
            height: 80px;
            display: inline-block;
            -webkit-mask-image: var(--topic-icon-url);
            mask-image: var(--topic-icon-url);
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
        }
        /* Admin-uploaded custom topic icon -- plain <img>, real
           colors/detail preserved exactly as uploaded, no recoloring. */
        .cr-learn-card-topic-icon-real {
            width: 90px;
            height: 90px;
            object-fit: contain;
        }
        .cr-topic-swatch-0 { background: #fde9d0; }
        .cr-topic-swatch-0 .cr-learn-card-topic-icon { background-color: #b45309; }
        .cr-topic-swatch-1 { background: #dbeafe; }
        .cr-topic-swatch-1 .cr-learn-card-topic-icon { background-color: #1d4ed8; }
        .cr-topic-swatch-2 { background: #ede9fe; }
        .cr-topic-swatch-2 .cr-learn-card-topic-icon { background-color: #7c3aed; }
        .cr-topic-swatch-3 { background: #fde4dc; }
        .cr-topic-swatch-3 .cr-learn-card-topic-icon { background-color: #c2410c; }
        .cr-topic-swatch-4 { background: #dcfce7; }
        .cr-topic-swatch-4 .cr-learn-card-topic-icon { background-color: #16a34a; }
        .cr-topic-swatch-5 { background: #fce7f3; }
        .cr-topic-swatch-5 .cr-learn-card-topic-icon { background-color: #db2777; }
        .cr-topic-swatch-6 { background: #f0ede3; }
        .cr-topic-swatch-6 .cr-learn-card-topic-icon { background-color: #57534e; }
        .cr-topic-swatch-7 { background: #d1fae5; }
        .cr-topic-swatch-7 .cr-learn-card-topic-icon { background-color: #059669; }
        .cr-learn-card-body {
            padding: 6px 6px;
            display: flex;
            flex-direction: column;
            flex: 1;
            justify-content: center;
        }
        .cr-learn-card-toprow {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .cr-learn-badge {
            display: inline-block;
            font-family: var(--font-display);
            font-size: 11px;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 10px;
            /* Fallback for any ContentType not covered below (e.g. a
               new "Interview" type added in the admin) -- specific
               rules override this, ContentType is never hardcoded to
               a fixed list anywhere in this project. */
            background: var(--off-white);
            color: var(--text-muted);
        }
        .cr-learn-badge.article { background: #eeedfe; color: #3c3489; }
        .cr-learn-badge.notes { background: #e1f5ee; color: #085041; }
        .cr-learn-badge.tutorial { background: #faece7; color: #712b13; }
        .cr-learn-badge.interview { background: #fbeaf0; color: #72243e; }
        .cr-learn-badge.test { background: #faeeda; color: #854f0b; }
        .cr-learn-badge.video { background: #e6f1fb; color: #0c447c; }
        .cr-learn-badge.topic { background: #eef2f7; color: #33475b; }
        .cr-learn-card-title {
            font-family: var(--font-display);
            font-size: 15px;
            font-weight: 700;
            line-height: 1.25;
            color: var(--navy);
            margin-top: 6px;
            margin-bottom: 6px;
        }
        .cr-learn-card-meta {
            font-size: 12px;
            color: var(--text-muted);
            font-family: var(--font-body);
        }
        .cr-topic-index-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 24px;
        }
        .cr-topic-index-item {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 14px 18px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            text-decoration: none;
            transition: border-color 0.15s;
        }
        .cr-topic-index-item:hover { border-color: var(--navy); }
        .cr-topic-index-name {
            font-family: var(--font-display);
            font-size: 14px;
            font-weight: 600;
            color: var(--navy);
        }
        .cr-topic-index-count {
            font-size: 12px;
            color: var(--text-muted);
            font-family: var(--font-body);
        }
        .cr-content-type-heading {
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: var(--font-display);
            font-size: 15px;
            font-weight: 700;
            color: var(--navy);
            margin-bottom: 10px;
        }
        .cr-content-type-heading .count {
            font-size: 11px;
            font-weight: 400;
            color: var(--text-muted);
            font-family: var(--font-body);
        }
        .cr-filter-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 18px;
        }
        .cr-filter-chip {
            font-family: var(--font-body);
            font-size: 12px;
            font-weight: 700;
            padding: 5px 12px;
            border-radius: 20px;
            border: 1px solid var(--border);
            background: #fff;
            color: var(--text-main);
            cursor: pointer;
            user-select: none;
            transition: background 0.15s, border-color 0.15s, color 0.15s;
        }
        .cr-filter-chip:hover:not(.active) {
            background: var(--off-white);
            border-color: var(--navy);
            color: var(--navy);
        }
        .cr-filter-chip.active {
            background: var(--navy);
            border-color: var(--navy);
            color: #fff;
        }
        .cr-show-more-wrap {
            display: flex;
            justify-content: center;
            margin-top: 4px;
        }
        .cr-show-more-btn {
            font-family: var(--font-display);
            font-size: 13px;
            font-weight: 700;
            color: var(--navy);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 8px 20px;
            background: #fff;
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
        }
        .cr-show-more-btn:hover {
            background: var(--navy);
            border-color: var(--navy);
            color: #fff;
            transform: translateY(-1px);
        }
        .art-related-box ul li a.cr-nav-active {
            background: #f0f5fb;
            color: #0f2744;
            font-weight: 700;
            border-left: 3px solid var(--navy) !important;
            padding-left: 11px !important;
        }
        .cr-subject-nav-count {
            float: right;
            font-size: 11px;
            color: var(--text-muted);
            font-family: var(--font-body);
        }
        .cr-subject-nav-scroll {
            max-height: 190px;
            overflow-y: auto;
        }
        /* Same idea as .cr-subject-nav-scroll above, sized for the
           Topics list instead -- rows here run ~37px (8px vertical
           padding + 17px text + border), so 10 rows before scrolling
           needs a taller cap than the Library box gets. */
        .cr-topic-nav-scroll {
            max-height: 370px;
            overflow-y: auto;
        }
        .cr-subject-nav-icon {
            width: 20px;
            height: 20px;
            border-radius: 4px;
            object-fit: cover;
            vertical-align: middle;
            margin-right: 6px;
        }
        /* Sidebar on the left -- override of the shared .art-layout/
           .art-main/.art-sidebar-right grid (style-tutorial-new.css),
           scoped to this page only via source order (this <style>
           loads after that stylesheet's <link>, so it wins at equal
           specificity) -- other pages using those shared classes
           (cr-content.aspx, cr-video.aspx, etc.) are unaffected. */
        .art-layout { grid-template-columns: 260px 1fr; }
        .art-main {
            order: 2;
            border-right: none;
            padding: 20px 0 20px 24px;
        }
        .art-sidebar-right { order: 1; padding: 20px 24px 20px 0; }
        @media (max-width: 1024px) {
            .art-layout { grid-template-columns: 220px 1fr; }
        }
        @media (max-width: 768px) {
            .art-layout { grid-template-columns: 1fr; }
            .art-main { order: 1; padding: 16px 0; }
            .art-sidebar-right { order: 2; padding: 0; }
        }

        /* ===== Subject Area carousel -- appended at the bottom of the
           page, below .art-layout, independent of the existing
           Test/Video/Topic grid above. One card per active Subject
           Area (including the one currently being viewed), 4 visible
           at a time, the rest reached via the arrow buttons scrolling
           the flex track horizontally. */
        .cr-subject-carousel-section {
            max-width: 1160px;
            margin: 32px auto 0;
            padding: 0 24px;
        }
        .cr-subject-carousel-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 14px;
        }
        .cr-subject-carousel-head h2 {
            font-family: var(--font-display);
            font-size: 20px;
            font-weight: 700;
            color: var(--navy);
            margin: 0;
        }
        .cr-subject-carousel-arrows { display: flex; gap: 8px; }
        .cr-subject-carousel-arrow {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            border: 1px solid var(--border);
            background: #fff;
            color: var(--navy);
            font-size: 16px;
            line-height: 1;
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s;
        }
        .cr-subject-carousel-arrow:hover { background: #fdf6e8; border-color: var(--accent); }
        .cr-subject-carousel-arrow:disabled { opacity: 0.35; cursor: default; }
        .cr-subject-carousel-arrow:disabled:hover { background: #fff; border-color: var(--border); }
        .cr-subject-carousel-track {
            display: flex;
            gap: 16px;
            overflow-x: auto;
            scroll-behavior: smooth;
            scroll-snap-type: x mandatory;
            /* overflow-x: auto with no overflow-y set makes overflow-y
               compute to auto too (not visible), per spec -- without
               this top padding the track clips the top few pixels of
               a card whenever :hover's translateY(-3px) lifts it
               above the track's own top edge. */
            padding: 6px 0 4px;
        }
        .cr-subject-carousel-track::-webkit-scrollbar { display: none; }
        .cr-subject-carousel-card {
            flex: 0 0 calc(25% - 12px);
            scroll-snap-align: start;
            border: 1px solid #e5e9f0;
            border-radius: 12px;
            overflow: hidden;
            background: #fff;
            box-shadow: 0 1px 2px rgba(15, 39, 68, 0.04);
            display: flex;
            flex-direction: column;
            transition: transform 0.15s, box-shadow 0.15s;
        }
        /* Same lift-on-hover treatment as .cr-learn-card/.cr-test-card
           elsewhere on this page/site. */
        .cr-subject-carousel-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-md);
        }
        /* The Subject Area the visitor is already on -- carousel
           includes it alongside every other subject (browse/discovery
           strip, not a "go elsewhere" nav), so it needs to visually
           stand out rather than look like an identical, slightly
           pointless card. */
        .cr-subject-carousel-card.current {
            border: 2px solid var(--accent);
        }
        .cr-subject-carousel-header {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 8px;
            padding: 22px 16px 22px;
            text-decoration: none;
        }
        .cr-subject-carousel-current-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 10.5px;
            font-family: var(--font-body);
            font-weight: 600;
            color: #fff;
            background: rgba(255, 255, 255, 0.25);
            padding: 3px 8px;
            border-radius: 999px;
        }
        .cr-subject-carousel-icon-chip {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.18);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* Full-color brand logos (icons/subjects/brand-*.svg, from
           Simple Icons) need an opaque white chip to read correctly --
           unlike the plain white-stroke Tabler icons used everywhere
           else, which rely on the translucent chip letting the card's
           own gradient show through. */
        .cr-subject-carousel-icon-chip.brand {
            background: #fff;
        }
        .cr-subject-carousel-icon-chip.brand img {
            width: 40px;
            height: 40px;
        }
        .cr-subject-carousel-header img {
            width: 55px;
            height: 55px;
            object-fit: contain;
        }
        .cr-subject-carousel-letter {
            font-family: var(--font-display);
            font-size: 28px;
            font-weight: 700;
            color: #fff;
        }
        .cr-subject-carousel-name {
            font-family: var(--font-display);
            font-size: 16px;
            font-weight: 700;
            color: #fff;
        }
        .cr-subject-carousel-topic-count {
            font-size: 11.5px;
            font-family: var(--font-body);
            color: rgba(255, 255, 255, 0.8);
        }
        .cr-subj-swatch-0 { background: linear-gradient(135deg, #e0546e, #72243e); }
        .cr-subj-swatch-1 { background: linear-gradient(135deg, #1fae82, #085041); }
        .cr-subj-swatch-2 { background: linear-gradient(135deg, #7b70e0, #3c3489); }
        .cr-subj-swatch-3 { background: linear-gradient(135deg, #f0a83a, #854f0b); }
        .cr-subj-swatch-4 { background: linear-gradient(135deg, #4d9de0, #0c447c); }
        .cr-subj-swatch-5 { background: linear-gradient(135deg, #d8598c, #72243e); }
        .cr-subj-swatch-6 { background: linear-gradient(135deg, #6b7f94, #33475b); }
        .cr-subj-swatch-7 { background: linear-gradient(135deg, #79b356, #27500a); }
        .cr-subject-carousel-body {
            padding: 12px 16px 16px;
            display: flex;
            flex-direction: column;
            flex: 1;
        }
        .cr-subject-carousel-desc {
            font-size: 12.5px;
            color: var(--text-muted);
            font-family: var(--font-body);
            line-height: 1.5;
            margin: 0 0 10px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .cr-subject-carousel-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 12px;
        }
        .cr-subject-carousel-badge {
            font-size: 11.5px;
            font-family: var(--font-body);
            padding: 4px 10px;
            border-radius: 999px;
            background: #f1f4f8;
            color: var(--navy);
            text-decoration: none;
            white-space: nowrap;
        }
        .cr-subject-carousel-badge:hover { background: #fdf6e8; }
        .cr-subject-carousel-cta {
            margin-top: auto;
            display: block;
            text-align: center;
            padding: 8px 12px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border);
            font-size: 13px;
            font-weight: 600;
            font-family: var(--font-body);
            color: var(--navy);
            text-decoration: none;
            transition: background 0.15s, border-color 0.15s;
        }
        .cr-subject-carousel-cta:hover { background: #fdf6e8; border-color: var(--accent); }
        @media (max-width: 1024px) {
            .cr-subject-carousel-card { flex: 0 0 calc(33.333% - 11px); }
        }
        @media (max-width: 768px) {
            .cr-subject-carousel-card { flex: 0 0 calc(50% - 8px); }
        }
        @media (max-width: 480px) {
            .cr-subject-carousel-card { flex: 0 0 calc(85% - 8px); }
        }