/* ==================================================================
   PracticePilot — Ultra-Premium Student Tests Catalogue
   [practicepilot_tests]
   ------------------------------------------------------------------
   Live-redesign pass: full product redesign of the catalogue FRONT
   END ONLY. No backend/REST/DB/hierarchy logic lives here or changed
   because of this file. Strongly scoped under .ppilot-tests-catalogue-app
   (the shortcode root's own class) and .ppilot-tests-* — no bare/global
   selectors (h1, h2, button, input, a, .container, .card, body, etc.)
   are ever used, so this cannot leak into the host theme, Elementor,
   Gutenberg, Tutor LMS, or the Exam Player's own markup.

   Organized as:
     1. Shell (full-bleed breakout + inner container)
     2. Hero
     3. Search
     4. Section headings
     5. Exam cards
     6. Category cards
     7. Test cards
     8. Breadcrumbs / back button
     9. Buttons / misc (loading, empty, error, pagination)
    10. Responsive
    11. Accessibility
   ================================================================== */

/* ------------------------------------------------------------------
   1. SHELL
   ------------------------------------------------------------------
   ROOT CAUSE (live bug): Plugin.php's render_tests_catalogue_shortcode()
   prints the root as `<div class="ppilot-app ppilot-tests-catalogue-app">`,
   reusing the SHARED ADMIN design-system class `.ppilot-app` (admin/
   ppilot-shared.css, loaded here as a dependency) purely to inherit its
   --ppilot-* color tokens. But `.ppilot-app` was written for wp-admin
   screens, which already sit inside WordPress's own centered
   #wpbody-content column — it only ever sets `max-width:1200px` and
   never `width:100%`/`margin:0 auto`, because admin never needed either.
   Reused verbatim on the public page, the live theme's own (narrower,
   ~1000px) content wrapper further constrains it, and with no explicit
   width/margin the whole catalogue shrank to a left-stuck column with a
   large empty gap on the right — confirmed against the live screenshots.

   FIX: give the catalogue root a real, scrollbar-safe full-bleed
   breakout so it visually escapes the theme's narrow content column
   without ever touching that theme's own CSS (body/.site-content/
   .container/.elementor-container/etc. are never referenced here).
   `--ppilot-vw` is set by tests-catalogue.js from
   `document.documentElement.clientWidth` (excludes the scrollbar) —
   plain `100vw` is only a fallback for the instant before that JS runs,
   since raw `100vw` would otherwise be a few pixels wider than the
   actually visible page on any site with a vertical scrollbar and
   introduce unwanted page-level horizontal scroll.

   §hardening (round 2, against live screenshots that still showed a
   narrow left-stuck column): the width/position/margin declarations
   below are marked `!important`. Many WordPress block themes apply
   their own width constraint to arbitrary shortcode/block output inside
   `.entry-content` (Gutenberg's "content width" rule, which normal
   blocks get unless explicitly marked `alignfull`) at plain, non-
   `!important` specificity — that rule can silently win over an ordinary
   single-class rule like `.ppilot-tests-catalogue-app { width: ... }`
   and this is a very well-documented, common cause of exactly the "still
   narrow, still flush-left" symptom seen live even though this exact
   CSS was already shipped. `!important` here is deliberately scoped to
   only these few shell properties on our own single root element — it
   is not used anywhere else in this file — specifically to win that one
   cascade fight without touching a single theme selector.
   NOTE: this technique cannot escape an ancestor that has literal
   `overflow: hidden`/`overflow-x: hidden` — no CSS can visually break a
   box out of a true clipping ancestor. If the width still does not
   change after this update (and after a hard refresh / cache clear),
   that is the next thing to check on the page/theme/Elementor-container
   side, since it is not something our own plugin CSS can override. */
.ppilot-tests-catalogue-app {
	--pp-bg: #f8fafc;
	--pp-surface: #ffffff;
	--pp-primary: #1e1b4b;
	--pp-primary-2: #312e6b;
	--pp-accent: #d97706;
	--pp-accent-light: #fef3e2;
	/* §premium-cta (visual-match pass): a brighter, more saturated orange
	   than the shared admin --ppilot-gold (#d97706, tuned for wp-admin
	   chrome) — scoped ONLY to CTAs inside this root (see the
	   .ppilot-tests-catalogue-app .ppilot-btn-primary override below), so
	   admin screens/other shortcodes keep their own existing button
	   color untouched. */
	--pp-cta: #f97316;
	--pp-cta-hover: #ea6a0a;
	--pp-danger-soft: #fef2f2; --pp-danger-ink: #dc2626;
	--pp-blue: #eff6ff; --pp-blue-ink: #1e40af;
	--pp-lavender: #fdf4ff; --pp-lavender-ink: #86198f;
	--pp-amber: #fffbeb; --pp-amber-ink: #b45309;
	/* §level-2-green-accent (Level-2-only redesign): new accent for the
	   "Most Asked Questions" category tile (reference: green icon tile/
	   arrow), added alongside the existing blue/lavender/amber trio. */
	--pp-green: #f0fdf4; --pp-green-ink: #15803d;
	--pp-text: #1f2430;
	--pp-muted: #64748b;
	--pp-border: #e6e9f0;
	--pp-radius: 22px;
	--pp-radius-sm: 14px;
	--pp-shadow-sm: 0 1px 2px rgba(16,24,40,0.05);
	--pp-shadow-md: 0 4px 14px rgba(30,27,75,0.07);
	--pp-shadow-lg: 0 16px 36px rgba(30,27,75,0.12);

	display: block !important;
	position: relative !important;
	width: var(--ppilot-vw, 100vw) !important;
	max-width: none !important;
	left: 50% !important;
	right: auto !important;
	margin-left: calc(var(--ppilot-vw, 100vw) / -2) !important;
	margin-right: 0 !important;
	box-sizing: border-box;
	/* §premium-background (visual-match pass): a soft, full-bleed pastel
	   blue-to-lavender-to-white wash behind the whole catalogue — plain
	   CSS gradient stops on our own scoped root only, no images/CDN
	   requests, no dark tones, no heavy/noisy gradients. */
	background: linear-gradient( 180deg, #eef3ff 0%, #f5f2ff 38%, var(--pp-bg) 100% );
	overflow-x: hidden; /* belt-and-suspenders: this element's own box can never introduce page scroll even if the vw var is briefly stale */
	padding: 32px 0 48px;
}
.ppilot-tests-catalogue-app * { box-sizing: border-box; }

/* Inner centered container ("ppilot-tests-container" role) — this is
   what actually holds the readable content width. Reserves a minimum
   gutter from the true viewport edge at each breakpoint (64/48/32px
   total) and caps out at 1600px on very wide monitors — a deliberately
   generous ceiling so the catalogue reads as a spacious, full product
   experience rather than just a slightly-wider WordPress column; excess
   space beyond that becomes equal left/right margin from centering. */
.ppilot-tests-wrap {
	width: min(1600px, calc(var(--ppilot-vw, 100vw) - 64px)) !important;
	max-width: none !important;
	margin: 0 auto !important;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--pp-text);
}
@media ( max-width: 1024px ) {
	.ppilot-tests-wrap { width: min(1600px, calc(var(--ppilot-vw, 100vw) - 48px)) !important; }
}
@media ( max-width: 640px ) {
	.ppilot-tests-wrap { width: min(1600px, calc(var(--ppilot-vw, 100vw) - 32px)) !important; }
}

/* §premium-cta (visual-match pass): scoped ONLY to buttons rendered
   inside this root — .ppilot-btn-primary itself is the SHARED admin
   class from admin/ppilot-shared.css (loaded as a dependency, unchanged
   file); this override never touches that file or any other shortcode/
   admin screen using the same class outside this root. */
.ppilot-tests-wrap .ppilot-btn-primary {
	background: var(--pp-cta); border-color: var(--pp-cta);
}
.ppilot-tests-wrap .ppilot-btn-primary:hover,
.ppilot-tests-wrap .ppilot-btn-primary:focus-visible,
.ppilot-tests-wrap .ppilot-btn-primary:active {
	background: var(--pp-cta-hover); border-color: var(--pp-cta-hover);
}

/* ------------------------------------------------------------------
   2. HERO
   ------------------------------------------------------------------ */
.ppilot-tests-header { margin-bottom: 24px; }
.ppilot-tests-heading { font-size: 26px; font-weight: 800; margin: 0 0 8px; color: var(--pp-primary); letter-spacing: -0.01em; line-height: 1.25; }
.ppilot-tests-subheading { font-size: 15px; color: var(--pp-muted); margin: 0; line-height: 1.6; }

/* §hero-alignment-fix (round 3): hero, search bar and the section
   label/grid below it all share the SAME left edge — no more center-
   vs-left mismatch. §featured-composition (round 4): `--split` turns
   this into a 2-column row — copy on the left, the featured exam card
   on the right. §featured-exam-always (Level-1-only redesign, spec §4/
   §8): `--split` is now applied whenever ANY exam is loaded (see the
   JS), not only for a single-exam site, and BOTH columns use an equal
   `flex: 1 1 0` with no hard `max-width` cap — a fixed 640px/380px cap
   on each side left a large, uncapped strip of empty space on very wide
   viewports once .ppilot-tests-wrap grew past ~1056px (the old caps'
   combined width), which was exactly the reported "huge empty space on
   the right" bug. Equal flex-basis/grow keeps the split close to the
   spec's 48–52% target at every width down to the 1024px breakpoint,
   where the responsive rules below stack it to one column instead. */
.ppilot-tests-header-hero {
	display: flex; flex-wrap: wrap; align-items: center; gap: 40px;
	position: relative; margin: 0 0 28px; padding: 24px 0 4px;
	background-image:
		radial-gradient(420px 200px at 0% 0%, rgba(30,27,75,0.05), transparent 70%),
		radial-gradient(420px 200px at 60% 10%, rgba(217,119,6,0.06), transparent 70%);
	background-repeat: no-repeat;
}
.ppilot-tests-hero-copy { flex: 1 1 420px; min-width: 0; max-width: 640px; }
.ppilot-tests-header-hero--split .ppilot-tests-hero-copy { flex: 1 1 0; max-width: none; }

.ppilot-tests-eyebrow-pill {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em;
	color: var(--pp-accent-ink, var(--pp-accent)); background: var(--pp-accent-light);
	border-radius: 999px; padding: 6px 14px; margin: 0 0 16px;
}
.ppilot-tests-header-hero .ppilot-tests-heading {
	display: flex; flex-direction: column; font-size: 38px; margin: 0 0 12px; gap: 2px;
}
.ppilot-tests-heading-line-1 { color: var(--pp-primary); }
.ppilot-tests-heading-line-2 {
	background: linear-gradient( 90deg, var(--pp-primary-2), #4338ca 60%, var(--pp-accent) );
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.ppilot-tests-tagline { font-size: 16px; max-width: 560px; margin-bottom: 22px; }

/* §premium-test-marketplace (Phase 3), §17: full-bleed promotional
   banner above the existing hero copy — see renderHeroBanner() in the
   JS. Uses a fixed aspect-ratio box (not a hardcoded pixel height) so
   it degrades gracefully to a shorter strip on narrow screens; the
   <picture>/<img> fills it via object-fit so a portrait or landscape
   source image never distorts or overflows. Entirely omitted (never an
   empty gray box) when no hero image is configured — see the JS. */
.ppilot-tests-hero-banner {
	position: relative; width: 100%; aspect-ratio: 16 / 5; max-height: 360px;
	border-radius: var(--pp-radius); overflow: hidden; margin-bottom: 28px;
	box-shadow: var(--pp-shadow-md);
}
.ppilot-tests-hero-banner-picture, .ppilot-tests-hero-banner-picture img {
	display: block; width: 100%; height: 100%; object-fit: cover;
}
.ppilot-tests-hero-banner-overlay {
	position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
	gap: 6px; padding: 0 36px;
	background: linear-gradient( 90deg, rgba(30,27,75,0.72) 0%, rgba(30,27,75,0.32) 55%, rgba(30,27,75,0) 100% );
}
.ppilot-tests-hero-banner-title { font-size: 28px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.ppilot-tests-hero-banner-sub { font-size: 15px; color: rgba(255,255,255,0.9); }

/* ------------------------------------------------------------------
   3. SEARCH
   ------------------------------------------------------------------ */
.ppilot-tests-toolbar {
	display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px;
}
.ppilot-tests-toolbar-hero { justify-content: flex-start; }
.ppilot-tests-toolbar-hero .ppilot-tests-search-wrap { flex: 1 1 480px; max-width: 560px; }

.ppilot-tests-search-wrap {
	position: relative; flex: 1 1 240px; min-width: 200px;
}
.ppilot-tests-search-icon {
	position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
	font-size: 15px; opacity: 0.55; pointer-events: none; line-height: 1;
}
.ppilot-tests-search-wrap .ppilot-tests-search-input {
	width: 100%; min-height: 52px; padding: 0 18px 0 44px;
	border: 1px solid var(--pp-border); border-radius: 999px;
	background: var(--pp-surface); box-shadow: var(--pp-shadow-sm);
	font-size: 14.5px; color: var(--pp-text);
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.ppilot-tests-search-wrap--hero .ppilot-tests-search-input { padding-right: 58px; }
.ppilot-tests-search-wrap .ppilot-tests-search-input::placeholder { color: var(--pp-muted); }
.ppilot-tests-search-wrap .ppilot-tests-search-input:focus-visible {
	outline: none; border-color: var(--pp-primary-2);
	box-shadow: 0 0 0 3px rgba(49,46,107,0.12), var(--pp-shadow-sm);
}
/* §circular-search-submit: purely decorative echo of the live-search
   input's own submit action (see renderSearchInput in the JS) — a
   premium SaaS-style affordance, not a second code path. */
.ppilot-tests-search-submit {
	position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
	width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
	background: linear-gradient( 135deg, var(--pp-primary-2), #4338ca ); color: #fff;
	font-size: 16px; display: flex; align-items: center; justify-content: center;
	transition: transform 0.15s ease;
}
.ppilot-tests-search-submit:hover { transform: translateY(-50%) scale(1.06); }

.ppilot-tests-filter {
	min-width: 160px; flex: 0 1 180px; min-height: 44px;
	border: 1px solid var(--pp-border); border-radius: 999px; background: var(--pp-surface);
	padding: 0 16px; font-size: 14px; color: var(--pp-text);
}

/* §premium-test-marketplace (Phase 3), §17: the Free/Premium toggle —
   deliberately its OWN class (`ppilot-tests-access-filter`, never
   `ppilot-tests-filter`, see the JS comment) but visually styled as the
   same family of pill control as the sort <select> above, so the two
   sit together in the toolbar without reading as mismatched. */
.ppilot-tests-access-filter {
	min-width: 150px; flex: 0 1 170px; min-height: 44px;
	border: 1px solid var(--pp-border); border-radius: 999px; background: var(--pp-surface);
	padding: 0 16px; font-size: 14px; color: var(--pp-text); cursor: pointer;
}

/* §feature-chips: four compact capability callouts under the hero
   search bar — static marketing copy (see FEATURE_CHIPS in the JS),
   not exam/category data. */
.ppilot-tests-feature-chips { display: flex; flex-wrap: wrap; gap: 20px; }
.ppilot-tests-feature-chip {
	display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--pp-text);
}
.ppilot-tests-feature-chip-icon {
	width: 26px; height: 26px; border-radius: 8px; background: var(--pp-bg);
	display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
}

/* §stat-chip: shared icon+value+label tile — featured exam card + the
   Level 2 exam recap chip both use this. */
.ppilot-tests-stat-chip { display: flex; align-items: center; gap: 10px; }
.ppilot-tests-stat-chip-icon {
	width: 34px; height: 34px; border-radius: 10px; background: var(--pp-bg);
	display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0;
}
.ppilot-tests-stat-chip-text { display: flex; flex-direction: column; line-height: 1.2; }
.ppilot-tests-stat-chip-value { font-size: 15px; font-weight: 800; color: var(--pp-primary); }
.ppilot-tests-stat-chip-label { font-size: 11.5px; color: var(--pp-muted); }

/* §featured-exam-card: the right column of the split hero — rendered
   whenever any exam is loaded (see the JS), always for the first real
   exam in the catalogue. `flex: 1 1 0` with no `max-width` matches the
   equal-share fix on .ppilot-tests-hero-copy above, so this column
   grows to fill its real ~50% share of the row on wide viewports
   instead of stopping at a small fixed width and leaving empty space
   beside it; `min-width` keeps its own content (avatar/stats row) from
   ever getting uncomfortably cramped as it shrinks toward the 1024px
   breakpoint, where the responsive rules stack it under the copy. */
.ppilot-tests-featured-card {
	position: relative; flex: 1 1 0; min-width: 320px; max-width: none; cursor: pointer;
	background: var(--pp-surface); border: 1px solid var(--pp-border); border-radius: var(--pp-radius);
	padding: 28px; box-shadow: var(--pp-shadow-lg);
	display: flex; flex-direction: column; gap: 14px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ppilot-tests-featured-card:hover, .ppilot-tests-featured-card:focus-visible { transform: translateY(-4px); }
.ppilot-tests-featured-card-ribbon {
	position: absolute; top: -12px; right: 22px; font-size: 12px; font-weight: 700;
	background: var(--pp-accent); color: #fff; border-radius: 999px; padding: 6px 14px;
	box-shadow: 0 4px 10px rgba(217,119,6,0.28);
}
.ppilot-tests-featured-card-avatar {
	width: 52px; height: 52px; border-radius: 15px; display: flex; align-items: center; justify-content: center;
	font-size: 17px; font-weight: 800;
}
.ppilot-tests-featured-card-title { font-size: 21px; font-weight: 800; margin: 0; color: var(--pp-primary); letter-spacing: -0.01em; }
.ppilot-tests-featured-card-desc { font-size: 13.5px; color: var(--pp-muted); margin: 0; line-height: 1.55; }
.ppilot-tests-featured-card-stats {
	display: flex; gap: 18px; padding: 14px 0; border-top: 1px solid var(--pp-border); border-bottom: 1px solid var(--pp-border);
}
.ppilot-tests-featured-card-cta { width: 100%; justify-content: center; text-decoration: none; margin-top: 4px; }

/* ------------------------------------------------------------------
   4. SECTION HEADINGS
   ------------------------------------------------------------------ */
.ppilot-tests-section-heading { margin-bottom: 18px; }
.ppilot-tests-section-label {
	font-size: 26px; font-weight: 800; letter-spacing: -0.01em; text-transform: none;
	color: var(--pp-primary); margin: 0 0 4px;
}
.ppilot-tests-section-sub { font-size: 13.5px; color: var(--pp-muted); margin: 0; }
/* §premium-test-marketplace (Phase 3), §17: the dynamic "N Mock Tests
   Available" line — a plain, non-badge text treatment, slightly bolder
   than the regular section-sub so the real, computed figure reads as a
   small highlight without looking like a fabricated marketing claim. */
.ppilot-tests-section-count { font-weight: 700; color: var(--pp-accent); margin-top: 2px; }

/* §section-heading-icon (Level-2-only redesign, spec §4): the "Select a
   Category" section header — an icon-square ahead of the label/sub
   pair, same visual family as the exam-hero-avatar below. */
.ppilot-tests-section-heading--icon {
	display: flex; align-items: center; gap: 14px;
}
.ppilot-tests-section-icon {
	width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
	background: linear-gradient( 135deg, var(--pp-primary-2), #4338ca ); color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 19px;
	box-shadow: var(--pp-shadow-md);
}

/* §exam-hero-card (Level-2-only redesign, spec §3): the large premium
   horizontal hero — replaces the earlier compact recap-chip. Full-width
   surface card with its own soft border/shadow/radius (same tokens the
   rest of the catalogue already uses), avatar + copy on the left, a
   subtle decorative panel on the right (§level-2-illustration below). */
.ppilot-tests-exam-hero-card {
	position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 32px;
	background: var(--pp-surface); border: 1px solid var(--pp-border); border-radius: var(--pp-radius);
	padding: 36px 40px; margin-bottom: 30px; box-shadow: var(--pp-shadow-lg);
}
.ppilot-tests-exam-hero-main { display: flex; align-items: flex-start; gap: 22px; min-width: 0; flex: 1 1 auto; }
.ppilot-tests-exam-hero-avatar {
	width: 72px; height: 72px; border-radius: 20px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center; font-size: 23px; font-weight: 800;
	box-shadow: var(--pp-shadow-sm);
}
.ppilot-tests-exam-hero-copy { min-width: 0; }
.ppilot-tests-exam-hero-copy .ppilot-tests-heading { font-size: 30px; margin: 0 0 8px; }
.ppilot-tests-exam-hero-copy .ppilot-tests-subheading { max-width: 540px; margin-bottom: 22px; font-size: 15.5px; }
.ppilot-tests-exam-hero-stats { display: flex; flex-wrap: wrap; gap: 32px; }
.ppilot-tests-exam-hero-stats .ppilot-tests-stat-chip-icon {
	width: 42px; height: 42px; border-radius: 12px; font-size: 17px; box-shadow: var(--pp-shadow-sm);
}
.ppilot-tests-exam-hero-stats .ppilot-tests-stat-chip-value { font-size: 17px; }
.ppilot-tests-exam-hero-stats .ppilot-tests-stat-chip-label { font-size: 12px; }
/* §level-2-illustration (spec §5): purely decorative, CSS-only soft
   blob shapes + a dotted texture + a couple of "floating" accent rings
   — a bit richer than the previous pass, still no image/CDN request, no
   fabricated data. Hidden below 1024px (responsive section) so it never
   competes with the stacked hero on tablet/mobile. */
.ppilot-tests-exam-hero-deco {
	position: relative; width: 220px; height: 150px; flex-shrink: 0;
	background-image:
		radial-gradient(76px 76px at 22% 28%, rgba(67,56,202,0.12), transparent 70%),
		radial-gradient(88px 88px at 78% 68%, rgba(217,119,6,0.11), transparent 70%),
		radial-gradient(circle, rgba(30,27,75,0.15) 1.5px, transparent 1.5px);
	background-size: auto, auto, 16px 16px;
	background-repeat: no-repeat, no-repeat, repeat;
	border-radius: var(--pp-radius-sm);
}
.ppilot-tests-exam-hero-deco::before,
.ppilot-tests-exam-hero-deco::after {
	content: ''; position: absolute; border-radius: 50%; border: 2px solid rgba(67,56,202,0.16);
}
.ppilot-tests-exam-hero-deco::before { width: 46px; height: 46px; top: 12px; right: 30px; }
.ppilot-tests-exam-hero-deco::after { width: 28px; height: 28px; bottom: 18px; left: 24px; border-color: rgba(217,119,6,0.18); }

/* §category-hero-card (Level-3-only, spec §2): the premium test-catalogue
   hero — exam-name eyebrow + "← Category Name" heading + real description
   + a single honest "Total Tests" stat chip. Reuses the exact same shell
   pattern (surface/border/radius/shadow) and the shared
   .ppilot-tests-exam-hero-deco decorative panel as the Level-2 hero, so no
   new decorative CSS is needed — only the copy layout differs (no avatar
   column, since a category has no logo/initial to show). */
.ppilot-tests-category-hero-card {
	position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 32px;
	background: var(--pp-surface); border: 1px solid var(--pp-border); border-radius: var(--pp-radius);
	padding: 36px 40px; margin-bottom: 30px; box-shadow: var(--pp-shadow-lg);
}
.ppilot-tests-category-hero-copy { min-width: 0; flex: 1 1 auto; }
.ppilot-tests-category-hero-eyebrow {
	margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
	color: var(--pp-primary-2); text-transform: uppercase;
}
.ppilot-tests-category-hero-title { font-size: 30px; margin: 0 0 8px; display: flex; align-items: center; gap: 12px; }
.ppilot-tests-category-hero-arrow { color: var(--pp-text-muted); font-weight: 600; }
.ppilot-tests-category-hero-copy .ppilot-tests-subheading { max-width: 540px; margin-bottom: 22px; font-size: 15.5px; }
.ppilot-tests-category-hero-stats { display: flex; flex-wrap: wrap; gap: 32px; }
.ppilot-tests-category-hero-stats .ppilot-tests-stat-chip-icon {
	width: 42px; height: 42px; border-radius: 12px; font-size: 17px; box-shadow: var(--pp-shadow-sm);
}
.ppilot-tests-category-hero-stats .ppilot-tests-stat-chip-value { font-size: 17px; }
.ppilot-tests-category-hero-stats .ppilot-tests-stat-chip-label { font-size: 12px; }

/* §level-3-illustration (spec §2): the original inline-SVG hero graphic
   sits inside the same .ppilot-tests-exam-hero-deco panel/sizing/hidden-
   on-tablet rules already defined above — only the SVG itself needs its
   own display rule so it fills that fixed-size panel. */
.ppilot-tests-hero-illustration { display: flex; align-items: center; justify-content: center; background-image: none; }
.ppilot-tests-hero-illustration svg { width: 100%; height: 100%; }

/* ------------------------------------------------------------------
   4b. LEVEL-3 CONTENT ROW (main column + optional sidebar)
   ------------------------------------------------------------------
   §level-3-2col-layout (spec §7/§8): a simple two-column flex row —
   main catalogue column flexes, the sidebar is a fixed comfortable
   reading width. Collapses to a single stacked column at 1024px and
   below (responsive section), matching "sidebar can move below content
   or disappear if unnecessary" / "single-column test cards" on mobile.
   The row itself is skipped by JS entirely when no sidebar card has real
   data — .ppilot-tests-main-col simply becomes the row's only child and
   naturally takes the full width via flex: 1 1 auto below. */
.ppilot-tests-content-row { display: flex; align-items: flex-start; gap: 28px; width: 100%; }
.ppilot-tests-main-col { flex: 1 1 auto; min-width: 0; }

.ppilot-tests-sidebar { flex: 0 0 320px; width: 320px; display: flex; flex-direction: column; gap: 20px; }
.ppilot-tests-sidebar-card {
	background: var(--pp-surface); border: 1px solid var(--pp-border); border-radius: var(--pp-radius-sm);
	padding: 20px; box-shadow: var(--pp-shadow-sm);
}
.ppilot-tests-sidebar-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ppilot-tests-sidebar-card-icon {
	width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
	background: var(--pp-blue); margin-right: 8px;
}
.ppilot-tests-sidebar-card-title { font-size: 15px; font-weight: 700; margin: 0; color: var(--pp-text); }
.ppilot-tests-sidebar-link { font-size: 12.5px; font-weight: 700; color: var(--pp-primary); text-decoration: none; white-space: nowrap; }
.ppilot-tests-sidebar-link:hover { text-decoration: underline; }

.ppilot-tests-sidebar-rows { display: flex; flex-direction: column; gap: 10px; }
.ppilot-tests-sidebar-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--pp-muted); }
.ppilot-tests-sidebar-row-value { font-weight: 700; color: var(--pp-text); text-align: right; }
.ppilot-tests-sidebar-desc { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--pp-muted); }

/* "Your Progress" ring — a simple conic-gradient circle, no chart
   library, sized from the real best-score percentage computed in JS. */
.ppilot-tests-sidebar-card--progress .ppilot-tests-sidebar-card-head { margin-bottom: 18px; }
.ppilot-tests-progress-ring {
	width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 18px;
	display: flex; align-items: center; justify-content: center;
}
.ppilot-tests-progress-ring-inner {
	width: 74px; height: 74px; border-radius: 50%; background: var(--pp-surface);
	display: flex; align-items: center; justify-content: center;
	font-size: 20px; font-weight: 800; color: var(--pp-text);
	box-shadow: inset 0 0 0 1px var(--pp-border);
}

.ppilot-tests-sidebar-actions { display: flex; flex-direction: column; gap: 8px; }
.ppilot-tests-sidebar-action {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--pp-text);
	transition: background 0.15s ease;
}
.ppilot-tests-sidebar-action:hover { background: var(--pp-bg); }
.ppilot-tests-sidebar-action-text { display: flex; flex-direction: column; gap: 2px; }
.ppilot-tests-sidebar-action-label { font-size: 13px; font-weight: 700; }
.ppilot-tests-sidebar-action-sub { font-size: 11.5px; color: var(--pp-muted); }
.ppilot-tests-sidebar-action-arrow { color: var(--pp-muted); font-size: 18px; }

.ppilot-tests-sidebar-tips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ppilot-tests-sidebar-tips li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--pp-text); line-height: 1.4; }
.ppilot-tests-sidebar-tip-check {
	flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; margin-top: 1px;
	background: var(--pp-green); color: var(--pp-green-ink); font-size: 11px; font-weight: 800;
	display: inline-flex; align-items: center; justify-content: center;
}

/* ------------------------------------------------------------------
   5. EXAM CARDS (Level 1)
   ------------------------------------------------------------------ */
.ppilot-tests-exam-grid,
.ppilot-tests-category-grid,
.ppilot-tests-grid {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px; width: 100%; margin-bottom: 28px;
}
.ppilot-tests-exam-grid > *, .ppilot-tests-category-grid > *, .ppilot-tests-grid > * { min-width: 0; }

/* §level-2-2col-grid (Level-2 final visual-refinement pass): the
   category grid is ALWAYS 2 columns on desktop AND tablet — never 3 —
   matching the reference's exact 2×2 layout for the 4 standard
   categories (Full Length / Topic Wise on row 1, Previous Year Papers /
   Most Asked Questions on row 2). This intentionally diverges from the
   exam grid (Level 1, up to 4 columns) and the test grid (Level 3, own
   dedicated 2-column override below, spec §5) — Level 2 always has
   exactly 4 real tiles (the
   fixed category taxonomy), so a stable 2×2 is the natural shape at
   every width down to the existing 640px 1-column breakpoint below.
   Grid's default `align-items: stretch` already makes every row's cards
   equal height with no extra CSS. */
.ppilot-tests-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* §level-3-2col-grid (Level-3 spec §5: "clean premium 2-column desktop
   grid"): same reasoning as the category grid above — the test grid gets
   its own dedicated 2-column override rather than sharing the 3-column
   base rule, independent of Level 1's up-to-4-column exam grid. */
.ppilot-tests-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* §single-exam-featured (spec §7): one exam should read as a deliberate
   featured module, not a tiny card floating in empty grid space. Left-
   aligned (not centered) so it lines up with the hero/label above it
   instead of re-introducing the same center-vs-left mismatch that
   affected the hero (see the hero-alignment-fix note above). */
.ppilot-tests-exam-grid--single {
	grid-template-columns: minmax(0, 1fr);
	max-width: 460px; margin-left: 0; margin-right: auto;
}

.ppilot-tests-exam-card {
	position: relative; overflow: hidden;
	display: flex; flex-direction: column; gap: 14px; cursor: pointer;
	background: var(--pp-surface); border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius); padding: 28px;
	box-shadow: var(--pp-shadow-sm);
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
/* §premium-test-marketplace (Phase 3), §9: optional exam image — a
   consistent aspect-ratio slot with object-fit:cover so any source
   image (portrait, landscape, square) crops cleanly without distortion;
   this element is only ever appended when a real image_url exists (see
   renderCardMedia() in the JS), so there is no placeholder box to style
   here — a card with no configured image simply keeps its existing
   avatar-only layout, unchanged. Negative margin pulls it flush to the
   card's own rounded edges/padding. */
.ppilot-tests-exam-card-media,
.ppilot-tests-featured-card-media,
.ppilot-tests-category-card-media {
	margin: -28px -28px 0; border-radius: var(--pp-radius) var(--pp-radius) 0 0;
	aspect-ratio: 16 / 9; overflow: hidden;
}
.ppilot-tests-exam-card-media img,
.ppilot-tests-featured-card-media img,
.ppilot-tests-category-card-media img {
	display: block; width: 100%; height: 100%; object-fit: cover;
}
/* §premium-test-marketplace (Phase 3), §10/§11: the exam/category price
   + access-duration line — only ever rendered when the backend returned
   a real, active product (see renderProductLine() in the JS); never
   invented. */
.ppilot-tests-product-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ppilot-tests-product-price { font-size: 18px; font-weight: 800; color: var(--pp-accent-ink, var(--pp-accent)); }
.ppilot-tests-product-duration { font-size: 12px; color: var(--pp-muted); }
/* §premium-test-marketplace (Phase 3), §8: a subtle, non-blocking "You
   have access" indicator — visibility/navigation into the exam is never
   gated on this; it is purely informational. */
.ppilot-tests-access-indicator {
	display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700;
	color: #15803d; background: #f0fdf4; border-radius: 999px; padding: 3px 10px; align-self: flex-start;
}
/* §premium-accent-line: a thin brand gradient hairline at the top edge —
   a subtle, non-gradient-heavy signature detail rather than a flat card. */
.ppilot-tests-exam-card::before {
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: linear-gradient( 90deg, var(--pp-primary), var(--pp-accent) );
	opacity: 0; transition: opacity 0.2s ease;
}
.ppilot-tests-exam-card:hover::before, .ppilot-tests-exam-card:focus-visible::before { opacity: 1; }
.ppilot-tests-exam-card:hover, .ppilot-tests-exam-card:focus-visible {
	box-shadow: var(--pp-shadow-lg); transform: translateY(-4px); border-color: #d7dbe8;
}
.ppilot-tests-exam-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ppilot-tests-exam-card-avatar {
	width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
	font-size: 16px; font-weight: 800; letter-spacing: 0.02em;
}
/* §premium-badge (visual-match pass): a warmer, flame-icon pill that
   sits slightly above the card's own top edge (like the featured card's
   ribbon), rather than a flat inline navy label — this is still the
   SAME vacuous-truth-only badge (only ever rendered when there is
   exactly one exam total, see renderExamCard's own comment), just
   restyled to read as premium as the reference. */
.ppilot-tests-badge-popular {
	position: relative; top: -2px;
	display: inline-flex; align-items: center; gap: 4px;
	font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em;
	color: #fff; background: linear-gradient( 135deg, #fb7185, var(--pp-cta, #f97316) );
	border-radius: 999px; padding: 5px 12px; box-shadow: 0 4px 10px rgba(249,115,22,0.28);
	white-space: nowrap;
}
.ppilot-tests-exam-card-title { font-size: 20px; font-weight: 800; margin: 0; color: var(--pp-primary); letter-spacing: -0.01em; line-height: 1.3; }
.ppilot-tests-exam-card-desc { font-size: 13.5px; color: var(--pp-muted); margin: 0; line-height: 1.55; }
.ppilot-tests-exam-card-stats { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700; color: var(--pp-text); margin: 4px 0; }
.ppilot-tests-exam-card-cta { margin-top: auto; width: 100%; justify-content: center; text-decoration: none; display: flex; align-items: center; gap: 6px; }
/* §cta-arrow: a small inline arrow that shifts right on hover — the one
   micro-interaction added to the CTA itself, kept subtle. */
.ppilot-tests-cta-arrow { transition: transform 0.15s ease; }
.ppilot-tests-exam-card:hover .ppilot-tests-cta-arrow,
.ppilot-tests-category-card:hover .ppilot-tests-cta-arrow,
.ppilot-tests-featured-card:hover .ppilot-tests-cta-arrow { transform: translateX(3px); }

/* ------------------------------------------------------------------
   6. CATEGORY CARDS (Level 2)
   ------------------------------------------------------------------ */
.ppilot-tests-category-card {
	position: relative; overflow: hidden;
	display: flex; flex-direction: column; align-items: flex-start; gap: 12px; cursor: pointer;
	background: var(--pp-surface); border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius); padding: 28px;
	box-shadow: var(--pp-shadow-sm);
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.ppilot-tests-category-card::before {
	content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: linear-gradient( 90deg, var(--pp-primary), var(--pp-accent) );
	opacity: 0; transition: opacity 0.2s ease;
}
.ppilot-tests-category-card:hover::before, .ppilot-tests-category-card:focus-visible::before { opacity: 1; }
.ppilot-tests-category-card:hover, .ppilot-tests-category-card:focus-visible {
	box-shadow: var(--pp-shadow-lg); transform: translateY(-4px); border-color: #d7dbe8;
}
.ppilot-tests-category-card-icon-wrap {
	width: 50px; height: 50px; border-radius: 15px; background: var(--pp-accent-light);
	display: flex; align-items: center; justify-content: center;
}
/* §category-accents (spec §8 / Level-2-only redesign): a subtle per-
   category-type tint, keyed by the same backend-provided slug already
   used for the icon lookup — never per-exam, so this stays fully
   data-driven. Icon tile, count badge AND arrow button all pick up the
   same accent color (reference: blue/purple/orange/green run through
   the whole card, not just the icon). */
.ppilot-tests-category-card--blue .ppilot-tests-category-card-icon-wrap { background: var(--pp-blue); }
.ppilot-tests-category-card--lavender .ppilot-tests-category-card-icon-wrap { background: var(--pp-lavender); }
.ppilot-tests-category-card--amber .ppilot-tests-category-card-icon-wrap { background: var(--pp-amber); }
.ppilot-tests-category-card--green .ppilot-tests-category-card-icon-wrap { background: var(--pp-green); }
.ppilot-tests-category-card--blue .ppilot-tests-category-card-count,
.ppilot-tests-category-card--blue .ppilot-tests-card-arrow-btn { color: var(--pp-blue-ink); background: var(--pp-blue); }
.ppilot-tests-category-card--lavender .ppilot-tests-category-card-count,
.ppilot-tests-category-card--lavender .ppilot-tests-card-arrow-btn { color: var(--pp-lavender-ink); background: var(--pp-lavender); }
.ppilot-tests-category-card--amber .ppilot-tests-category-card-count,
.ppilot-tests-category-card--amber .ppilot-tests-card-arrow-btn { color: var(--pp-amber-ink); background: var(--pp-amber); }
.ppilot-tests-category-card--green .ppilot-tests-category-card-count,
.ppilot-tests-category-card--green .ppilot-tests-card-arrow-btn { color: var(--pp-green-ink); background: var(--pp-green); }
.ppilot-tests-category-card-icon { font-size: 23px; line-height: 1; }
.ppilot-tests-category-card-title { font-size: 18px; font-weight: 800; margin: 0; color: var(--pp-primary); letter-spacing: -0.005em; }
.ppilot-tests-category-card-desc { font-size: 13.5px; color: var(--pp-muted); margin: 0; line-height: 1.55; flex: 1; }
.ppilot-tests-category-card-footer {
	display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: auto; padding-top: 4px;
}
.ppilot-tests-category-card-count { font-size: 12.5px; font-weight: 700; color: var(--pp-accent); background: var(--pp-accent-light); border-radius: 999px; padding: 3px 11px; }
.ppilot-tests-category-card-count--amber { color: var(--pp-amber-ink); background: var(--pp-amber); }
/* §arrow-btn: the small circular decorative affordance (reference
   image) — decorative only (aria-hidden), since the WHOLE card is
   already the click/keyboard target via role="button" + tabindex. */
.ppilot-tests-card-arrow-btn {
	width: 34px; height: 34px; border-radius: 50%; background: var(--pp-bg); flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center; font-size: 15px; color: var(--pp-primary-2);
	transition: background 0.15s ease, transform 0.15s ease, filter 0.15s ease;
}
.ppilot-tests-card-arrow-btn--amber { color: var(--pp-amber-ink); background: var(--pp-amber); }
/* Category-tile arrows (Level 2) already carry their own accent color at
   rest (rules above) — hovering just nudges/deepens them, it never
   swaps to a flat navy fill the way the plain (accent-less) Level-1 exam-
   card arrow below does. */
.ppilot-tests-category-card:hover .ppilot-tests-card-arrow-btn,
.ppilot-tests-fallback-row:hover .ppilot-tests-card-arrow-btn--amber {
	transform: translateX(2px); filter: brightness(0.94);
}
.ppilot-tests-exam-card:hover .ppilot-tests-card-arrow-btn {
	background: var(--pp-primary-2); color: #fff; transform: translateX(2px);
}

/* §uncategorized-fallback-row (spec §8): its own full-width, visually
   quieter horizontal row BELOW the real category grid — see
   renderUncategorizedRow in the JS. Dashed border + muted background is
   the "this is a fallback/system bucket, not a real category" signal. */
.ppilot-tests-fallback-row {
	display: flex; align-items: center; gap: 18px; cursor: pointer;
	background: var(--pp-bg); border: 1.5px dashed var(--pp-border); border-radius: var(--pp-radius-sm);
	padding: 18px 22px; margin-top: 20px;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.ppilot-tests-fallback-row:hover, .ppilot-tests-fallback-row:focus-visible { border-color: #c7cbd8; background: #f1f3f7; }
.ppilot-tests-fallback-row-icon {
	width: 44px; height: 44px; border-radius: 12px; background: #eef0f4; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.ppilot-tests-fallback-row-text { flex: 1; min-width: 0; }
.ppilot-tests-fallback-row-title { font-size: 15.5px; font-weight: 700; margin: 0; color: var(--pp-text); }
.ppilot-tests-fallback-row-desc { font-size: 12.5px; color: var(--pp-muted); margin: 2px 0 0; }

/* ------------------------------------------------------------------
   7. TEST CARDS (Level 3)
   ------------------------------------------------------------------ */
/* §level-3-card-polish (spec §6): Level-3 test cards get their own
   slightly larger radius (18px, within the spec's 16–20px range) via a
   direct value rather than editing the shared --pp-radius-sm variable —
   that variable also drives Level 1/2 card radii, which the spec forbids
   touching. Padding/shadow/hover are unchanged from the existing shared
   card language. */
.ppilot-tests-card {
	display: flex; flex-direction: column; gap: 14px;
	background: var(--pp-surface); border: 1px solid var(--pp-border);
	border-radius: 18px; padding: 24px;
	box-shadow: var(--pp-shadow-sm);
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.ppilot-tests-card:hover { box-shadow: var(--pp-shadow-md); transform: translateY(-3px); border-color: #d7dbe8; }

/* §premium-test-marketplace (Phase 3), §9: test-card media ALWAYS gets
   this wrapper (unlike the exam/category media above, which is simply
   omitted when absent) — see renderTestCardMedia() in the JS — so a
   whole category grid of mixed image/no-image tests still lines up to
   the same consistent aspect-ratio slot. A null image_url gets the
   `--placeholder` modifier instead of a broken <img>: a flat tinted
   box with the test's own type glyph, never a missing-image icon. */
.ppilot-tests-card-media {
	margin: -24px -24px 0; border-radius: 18px 18px 0 0;
	aspect-ratio: 16 / 9; overflow: hidden;
}
.ppilot-tests-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ppilot-tests-card-media--placeholder {
	display: flex; align-items: center; justify-content: center;
	background: var(--pp-accent-light); font-size: 34px; color: var(--pp-accent);
}

/* §premium-test-marketplace (Phase 3), §8: the Premium badge + 🔒 lock
   treatment. Unlocked premium tests (active entitlement) show a star
   instead of a lock — same badge, different glyph (see the JS) — so a
   student can tell at a glance that a premium test is already theirs. */
.ppilot-tests-card-premium-badge {
	display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
	letter-spacing: 0.02em; text-transform: uppercase; color: #fff;
	background: linear-gradient( 135deg, #7c3aed, #4338ca ); border-radius: 999px; padding: 3px 10px;
}
/* A locked card itself gets a slightly muted treatment — still fully
   readable/legible (spec: visibility is never reduced), just a visual
   cue distinct from an immediately-startable card. */
.ppilot-tests-card--locked .ppilot-tests-card-title,
.ppilot-tests-card--locked .ppilot-tests-card-meta { opacity: 0.85; }
.ppilot-tests-card-unlock-btn {
	background: linear-gradient( 135deg, #7c3aed, #4338ca ) !important; border: none;
	display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px;
}
/* §no-payment-this-phase: the inline "coming soon" notice — reuses the
   shared .ppilot-notice look, with its own dismiss control; never
   implies a completed transaction. */
.ppilot-tests-unlock-notice {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	margin-top: 4px; font-size: 12.5px; line-height: 1.5;
}
.ppilot-tests-unlock-notice-dismiss {
	flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: none; background: transparent;
	cursor: pointer; font-size: 15px; line-height: 1; color: inherit; opacity: 0.7;
}
.ppilot-tests-unlock-notice-dismiss:hover { opacity: 1; }

.ppilot-tests-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ppilot-tests-card-type-group { display: inline-flex; align-items: center; gap: 8px; }
.ppilot-tests-card-type-icon {
	width: 26px; height: 26px; border-radius: 8px; background: var(--pp-accent-light);
	display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
}
.ppilot-tests-card-type-badge {
	display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
	color: var(--pp-primary);
}
.ppilot-tests-card-state-badge { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px; }
.ppilot-tests-card-state-completed { color: #15803d; background: #f0fdf4; }
.ppilot-tests-card-state-progress { color: #b45309; background: #fffbeb; }

.ppilot-tests-card-title { font-size: 17px; font-weight: 700; margin: 0; line-height: 1.4; color: var(--pp-text); }

.ppilot-tests-card-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--pp-muted); }

.ppilot-tests-card-stats { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--pp-muted); }
.ppilot-tests-card-best { font-weight: 600; color: var(--pp-primary); }

.ppilot-tests-card-cta { margin-top: auto; width: 100%; justify-content: center; text-decoration: none; }

.ppilot-tests-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 8px; }
.ppilot-tests-pagination-status { font-size: 13px; color: var(--pp-muted); }

/* ------------------------------------------------------------------
   8. BREADCRUMBS / BACK BUTTON
   ------------------------------------------------------------------ */
.ppilot-tests-breadcrumb {
	display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13.5px; flex-wrap: wrap;
}
.ppilot-tests-breadcrumb-home { font-size: 13px; line-height: 1; opacity: 0.85; }
.ppilot-tests-breadcrumb-link {
	/* §breadcrumb-outline-hardening: explicit zero border/outline/shadow
	   as the resting state (only :focus-visible below restores one) —
	   a plain <button> can otherwise pick up a host theme's or browser's
	   own default button chrome (a boxed/outlined look), which is not
	   this component's own styling. */
	background: none; border: 0; outline: none; box-shadow: none;
	padding: 4px 6px; margin: -4px -6px; border-radius: 6px; cursor: pointer;
	color: var(--pp-primary-2); font-weight: 600; font-size: 13.5px; text-decoration: none;
	display: inline-flex; align-items: center; -webkit-tap-highlight-color: transparent;
}
.ppilot-tests-breadcrumb-link:hover { background: var(--pp-bg); text-decoration: underline; }
.ppilot-tests-breadcrumb-current { border: 0; outline: none; box-shadow: none; }
.ppilot-tests-breadcrumb-sep { color: #c8ccd8; font-size: 13px; }
.ppilot-tests-breadcrumb-current { color: var(--pp-muted); font-weight: 600; }

.ppilot-tests-back-btn {
	margin-bottom: 18px; background: var(--pp-surface); border: 1px solid var(--pp-border);
	border-radius: 999px; color: var(--pp-text); font-weight: 600;
}
.ppilot-tests-back-btn:hover { background: var(--pp-bg); }

/* ------------------------------------------------------------------
   9. BUTTONS / MISC (loading, empty, error, pagination — layered on
   top of the shared .ppilot-btn/.ppilot-btn-primary from admin/
   ppilot-shared.css, which already gives the CTA its brand color and
   is deliberately NOT re-overridden with a generic default WP look).
   ------------------------------------------------------------------ */
.ppilot-tests-loading, .ppilot-tests-error-state, .ppilot-tests-empty-state {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
	padding: 72px 20px; text-align: center; background: var(--pp-surface); border: 1px solid var(--pp-border); border-radius: var(--pp-radius);
}
/* §level-3-production-polish: premium empty-state heading (spec "Empty
   State") — the shared block above already centers/spaces its children,
   this only sizes the heading text. */
.ppilot-tests-empty-state-title { font-size: 19px; font-weight: 700; color: var(--pp-text); margin: 0; }
.ppilot-tests-spinner {
	width: 28px; height: 28px; border-radius: 50%;
	border: 3px solid var(--pp-border); border-top-color: var(--pp-primary);
	animation: ppilot-tests-spin 0.8s linear infinite;
}
@keyframes ppilot-tests-spin { to { transform: rotate( 360deg ); } }
@media ( prefers-reduced-motion: reduce ) {
	.ppilot-tests-spinner { animation: none; }
	.ppilot-tests-exam-card, .ppilot-tests-category-card, .ppilot-tests-card,
	.ppilot-tests-exam-card:hover, .ppilot-tests-category-card:hover, .ppilot-tests-card:hover {
		transition: none; transform: none;
	}
}

/* ------------------------------------------------------------------
   10. RESPONSIVE
   ------------------------------------------------------------------
   §exam-grid-breakpoints (Level-1-only redesign, spec §12): the exam
   grid (Level 1) now gets its OWN column count per tier, wider than the
   frozen Level 2/3 grids (.ppilot-tests-category-grid/.ppilot-tests-grid
   — untouched, still exactly 3/2/1 as before): Desktop >=1280: 4-column
   exam grid, spacious gaps/headings (rule directly below) · 1025–1279:
   3-column exam grid (falls through to the shared base rule above,
   unchanged) · 1024 and down (tablet): 2-column (shared rule, applies
   to all three grids alike, matches spec) · 640 and below (mobile):
   1-column, full-width search/cards, 44px min tap targets, no
   horizontal scroll (guaranteed by the shell rules above), breadcrumbs
   wrap safely (flex-wrap already set). */
@media ( min-width: 1280px ) {
	.ppilot-tests-header-hero .ppilot-tests-heading { font-size: 42px; }
	.ppilot-tests-exam-grid, .ppilot-tests-category-grid, .ppilot-tests-grid { gap: 30px; }
	/* §single-exam-grid-bugfix (live report): `.ppilot-tests-exam-grid` and
	   `.ppilot-tests-exam-grid--single` are both single-class selectors of
	   EQUAL specificity, and this rule sits later in the cascade than the
	   `--single` rule above (section 5) — so on a real single-exam site it
	   was silently winning and forcing `repeat(4, ...)` onto a 460px-wide
	   single-card grid, squeezing that one real exam card into a ~115px
	   column (exactly the severely overflowing/clipped card + badge seen
	   live). `:not(...)` raises this selector's specificity above the
	   `--single` rule regardless of source order, so the single-exam case
	   always keeps its intended one-column, 460px-max-width layout, and
	   only a genuine multi-exam grid gets 4 columns here. */
	.ppilot-tests-exam-grid:not(.ppilot-tests-exam-grid--single) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ppilot-tests-header-hero { margin-bottom: 34px; padding: 32px 0 8px; }
}
@media ( max-width: 1024px ) {
	/* Same :not(--single) guard as the 1280px rule above — this grouped
	   selector is also later in the cascade than the --single rule at
	   equal specificity, and would otherwise squeeze a real single-exam
	   card into a 2-column, half-width layout on tablet widths. */
	.ppilot-tests-exam-grid:not(.ppilot-tests-exam-grid--single), .ppilot-tests-category-grid, .ppilot-tests-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ppilot-tests-catalogue-app { padding: 32px 0 44px; }
	.ppilot-tests-header-hero--split .ppilot-tests-hero-copy { flex-basis: 100%; }
	.ppilot-tests-featured-card { max-width: none; flex-basis: 100%; }
	/* §level-2-hero-responsive (spec §"responsive": "hero must stack
	   cleanly", tablet 2-column category grid already covered by the
	   shared grid rule above): the decorative panel is dropped first
	   (spec §3: "do not use an oversized illustration that breaks mobile
	   layout") and the avatar/copy stack full-width. */
	.ppilot-tests-exam-hero-deco { display: none; }
	.ppilot-tests-exam-hero-card { flex-direction: column; align-items: stretch; }
	/* §level-3-hero-responsive: same stacking treatment for the Level-3
	   category hero (shares .ppilot-tests-exam-hero-deco, already hidden
	   by the rule above). */
	.ppilot-tests-category-hero-card { flex-direction: column; align-items: stretch; }
	/* §level-3-sidebar-responsive (spec §8, "sidebar can move below
	   content or disappear if unnecessary" on tablet): stacks below the
	   main catalogue column at full width rather than squeezing into a
	   narrow side rail. */
	.ppilot-tests-content-row { flex-direction: column; }
	.ppilot-tests-sidebar { flex: 1 1 auto; width: 100%; flex-direction: row; flex-wrap: wrap; }
	.ppilot-tests-sidebar-card { flex: 1 1 260px; }
}
@media ( max-width: 640px ) {
	.ppilot-tests-catalogue-app { padding: 24px 0 36px; }
	.ppilot-tests-exam-grid, .ppilot-tests-category-grid, .ppilot-tests-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.ppilot-tests-exam-grid--single { max-width: none; }
	.ppilot-tests-filter { flex: 1 1 100%; }
	.ppilot-tests-toolbar-hero .ppilot-tests-search-wrap { flex: 1 1 100%; max-width: none; }
	.ppilot-tests-header-hero .ppilot-tests-heading { font-size: 27px; }
	.ppilot-tests-header-hero { gap: 24px; }
	.ppilot-tests-feature-chips { gap: 14px 18px; }
	.ppilot-tests-fallback-row { flex-wrap: wrap; }
	.ppilot-tests-exam-card, .ppilot-tests-category-card, .ppilot-tests-card, .ppilot-tests-featured-card { padding: 20px; }
	/* §overflow-fix (Phase 3 browser/responsive pass, found via a real
	   320px-viewport Playwright check): the featured card's own base
	   rule (section 3) hard-codes `min-width: 320px` for its desktop
	   two-column split layout — at viewport widths at/under the shell's
	   320px gutter-adjusted content area, that fixed min-width was wider
	   than the available column and forced page-level horizontal
	   scroll. It already goes full-width (flex-basis:100%) at this
	   breakpoint, so the 320px floor serves no purpose here and is
	   dropped in favor of filling its own full-width flex item exactly,
	   with zero overflow at any viewport this narrow. */
	.ppilot-tests-featured-card { min-width: 0; width: 100%; }
	/* Media negative-margin must track the mobile 20px padding above,
	   otherwise a configured exam/category/test image would overshoot
	   the card's rounded corners at this breakpoint. */
	.ppilot-tests-exam-card-media, .ppilot-tests-featured-card-media,
	.ppilot-tests-category-card-media, .ppilot-tests-card-media {
		margin: -20px -20px 0;
	}
	/* §level-2-hero-mobile: hero card, avatar and heading shrink for a
	   purpose-designed (not just squeezed) single-column mobile layout;
	   stat chips wrap onto their own rows instead of overflowing. */
	.ppilot-tests-exam-hero-card { padding: 20px; gap: 16px; }
	.ppilot-tests-exam-hero-main { flex-direction: column; gap: 14px; }
	.ppilot-tests-exam-hero-avatar { width: 52px; height: 52px; font-size: 17px; }
	.ppilot-tests-exam-hero-copy .ppilot-tests-heading { font-size: 22px; }
	.ppilot-tests-exam-hero-stats { gap: 16px 22px; }
	/* §level-3-hero-mobile: same purpose-designed mobile shrink as the
	   Level-2 hero directly above, applied to the Level-3 category hero. */
	.ppilot-tests-category-hero-card { padding: 20px; gap: 16px; }
	.ppilot-tests-category-hero-title { font-size: 22px; }
	.ppilot-tests-category-hero-stats { gap: 16px 22px; }
	/* §level-3-sidebar-mobile: single stacked column, no side-by-side
	   cards — a purpose-designed mobile layout, not the tablet's 2-up
	   wrap. */
	.ppilot-tests-sidebar { flex-direction: column; }
	.ppilot-tests-sidebar-card { flex-basis: auto; }
	.ppilot-tests-section-heading--icon { gap: 10px; }
	.ppilot-tests-section-icon { width: 36px; height: 36px; font-size: 16px; }
	.ppilot-tests-back-btn, .ppilot-tests-breadcrumb-link,
	.ppilot-tests-search-wrap .ppilot-tests-search-input, .ppilot-tests-filter,
	.ppilot-tests-access-filter {
		min-height: 44px;
	}
	.ppilot-tests-filter, .ppilot-tests-access-filter { flex: 1 1 100%; }
	.ppilot-tests-hero-banner { aspect-ratio: 16 / 9; }
	.ppilot-tests-hero-banner-title { font-size: 20px; }
	.ppilot-tests-hero-banner-sub { font-size: 12.5px; }
	.ppilot-tests-hero-banner-overlay { padding: 0 20px; }
	.ppilot-tests-exam-card-cta, .ppilot-tests-category-card-cta, .ppilot-tests-card-cta,
	.ppilot-tests-featured-card-cta {
		min-height: 44px;
	}
	.ppilot-tests-card-arrow-btn { width: 38px; height: 38px; }
	.ppilot-tests-search-submit { width: 36px; height: 36px; }
}

/* ------------------------------------------------------------------
   11. ACCESSIBILITY
   ------------------------------------------------------------------ */
.ppilot-tests-wrap a:focus-visible,
.ppilot-tests-wrap button:focus-visible,
.ppilot-tests-wrap select:focus-visible,
.ppilot-tests-wrap input:focus-visible,
.ppilot-tests-wrap [tabindex]:focus-visible {
	outline: 2px solid var(--pp-accent); outline-offset: 1px;
}

/* ------------------------------------------------------------------
   12. PURCHASE MODAL (§razorpay-premium-commerce, Phase 4)
   Mounted once at the catalogue root (see renderPurchaseModal() in
   tests-catalogue.js) — never nested inside a card, so it is unaffected
   by which card/level triggered it. Deliberately plain/utilitarian,
   matching this file's existing modal-less design; a full redesign is
   out of scope for this phase.
   ------------------------------------------------------------------ */
.ppilot-purchase-modal-overlay {
	position: fixed; inset: 0; z-index: 10000;
	background: rgba(15, 18, 30, 0.55);
	display: flex; align-items: center; justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}

.ppilot-purchase-modal {
	position: relative;
	background: #fff; color: #1a1a1a;
	border-radius: 12px;
	max-width: 420px; width: 100%;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding: 28px 24px 24px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
	box-sizing: border-box;
}

.ppilot-purchase-modal-close {
	position: absolute; top: 10px; right: 10px;
	width: 32px; height: 32px;
	border: none; background: transparent;
	font-size: 22px; line-height: 1; cursor: pointer; color: #666;
}

.ppilot-purchase-modal-title {
	margin: 0 0 16px; font-size: 18px; font-weight: 700;
}

.ppilot-purchase-summary-list {
	display: grid; grid-template-columns: auto 1fr;
	gap: 6px 12px;
	margin: 0 0 20px;
}
.ppilot-purchase-summary-list dt { font-weight: 600; color: #555; }
.ppilot-purchase-summary-list dd { margin: 0; text-align: right; }

.ppilot-purchase-pay-btn {
	width: 100%; justify-content: center;
}

.ppilot-purchase-success-title {
	font-size: 17px; font-weight: 700; color: #1a7f37; margin: 0 0 8px;
}

.ppilot-purchase-error .ppilot-notice-error {
	margin-bottom: 14px;
}

@media (max-width: 400px) {
	.ppilot-purchase-modal { padding: 22px 16px 18px; border-radius: 10px; }
	.ppilot-purchase-summary-list { grid-template-columns: 1fr; }
	.ppilot-purchase-summary-list dd { text-align: left; }
}

/* =====================================================================
   v0.52.0 — PREMIUM TEST MARKETPLACE 2.0 (Level 1 of [practicepilot_tests])
   ---------------------------------------------------------------------
   Replaces the earlier "v0.50.0 — PREMIUM TEST MARKETPLACE" base layer and
   the v0.51.0 reference-alignment layer with ONE stylesheet built for the
   approved reference (screenshot 3): photo hero with an angled navy
   benefit panel, exam-group chip row, one compact filter row, a 4 / 2 / 1
   column grid of equal-height cards with the title over the cover, a
   6-item feature row, discount price row + access pill, and a premium
   View Details dialog. Below 768px the filters move into an accessible
   bottom sheet.

   Every rule is scoped to the shortcode's own root ID
   (#ppilot-tests-catalogue-root) + a `.ppmk-*` class, so it can never
   reach the host theme, and it wins (1,1,0+) over theme rules such as
   `.entry-content p` (0,1,1). No images are bundled: without an admin-set
   hero / cover image the hero and covers are designed CSS gradients with
   inline-SVG ridges. The THEME-ISOLATION LAYER is the last block of this
   file.
   ===================================================================== */
#ppilot-tests-catalogue-root.ppilot-tests-catalogue-app--marketplace {
	background: #f3f6fb;
	padding: 18px 0 64px;
}
#ppilot-tests-catalogue-root .ppmk,
#ppilot-tests-catalogue-root .ppmk-modal-overlay,
#ppilot-tests-catalogue-root .ppmk-drawer-overlay {
	--mk-navy: #0b1f45;
	--mk-navy-2: #0f2c63;
	--mk-blue: #2563eb;
	--mk-blue-hover: #1d4ed8;
	--mk-blue-active: #1e40af;
	--mk-blue-50: #eff6ff;
	--mk-blue-100: #dbeafe;
	--mk-red: #e0182d;
	--mk-gold: #fbbf24;
	--mk-gold-2: #facc15;
	--mk-gold-ink: #1f1500;
	--mk-green: #047857;
	--mk-ink: #0f172a;
	--mk-text: #1e293b;
	--mk-body: #334155;
	--mk-muted: #475569;
	--mk-line: #e2e8f0;
	--mk-line-2: #d5deea;
	--mk-surface: #ffffff;
	--mk-soft: #f8fafc;
	--mk-radius: 16px;
	--mk-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 6px 18px rgba(15, 23, 42, 0.06);
	--mk-shadow-hover: 0 2px 4px rgba(15, 23, 42, 0.06), 0 18px 36px rgba(11, 31, 69, 0.14);
	--mk-focus: 0 0 0 3px rgba(37, 99, 235, 0.45);
	color: var(--mk-text);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
}
#ppilot-tests-catalogue-root .ppmk {
	max-width: 1440px;
	margin: 0 auto;
}
#ppilot-tests-catalogue-root .ppmk-icon { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: middle; }
#ppilot-tests-catalogue-root .ppmk-sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------------- buttons ---------------- */
#ppilot-tests-catalogue-root .ppmk-btn,
#ppilot-tests-catalogue-root .ppmk-btn:visited {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 42px; padding: 0 18px; margin: 0;
	border-radius: 10px; border: 1.5px solid transparent;
	font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0;
	text-transform: none; text-decoration: none; text-shadow: none; white-space: nowrap;
	cursor: pointer; box-shadow: none; background: none; color: var(--mk-navy);
	transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
#ppilot-tests-catalogue-root .ppmk-btn .ppmk-btn-label { color: inherit; font: inherit; }
#ppilot-tests-catalogue-root .ppmk-btn .ppmk-btn-arrow { width: 16px; height: 16px; transition: transform .15s ease; }
#ppilot-tests-catalogue-root .ppmk-btn:hover .ppmk-btn-arrow { transform: translateX(3px); }
#ppilot-tests-catalogue-root .ppmk-btn:focus-visible { outline: none; box-shadow: var(--mk-focus); }
#ppilot-tests-catalogue-root .ppmk-btn[disabled] { cursor: default; }
#ppilot-tests-catalogue-root .ppmk-btn--primary,
#ppilot-tests-catalogue-root .ppmk-btn--primary:visited { background: var(--mk-blue); border-color: var(--mk-blue); color: #fff; }
#ppilot-tests-catalogue-root .ppmk-btn--primary:hover { background: var(--mk-blue-hover); border-color: var(--mk-blue-hover); color: #fff; }
#ppilot-tests-catalogue-root .ppmk-btn--primary:active { background: var(--mk-blue-active); border-color: var(--mk-blue-active); color: #fff; }
#ppilot-tests-catalogue-root .ppmk-btn--secondary,
#ppilot-tests-catalogue-root .ppmk-btn--secondary:visited { background: #eef2f7; border-color: #eef2f7; color: var(--mk-navy); }
#ppilot-tests-catalogue-root .ppmk-btn--secondary:hover { background: #e2e8f1; border-color: #e2e8f1; color: var(--mk-navy); }
#ppilot-tests-catalogue-root .ppmk-btn--secondary:active { background: #d6dfeb; border-color: #d6dfeb; color: var(--mk-navy); }
#ppilot-tests-catalogue-root .ppmk-btn--outline,
#ppilot-tests-catalogue-root .ppmk-btn--outline:visited { background: #fff; border-color: var(--mk-line-2); color: var(--mk-navy); }
#ppilot-tests-catalogue-root .ppmk-btn--outline:hover { background: var(--mk-blue-50); border-color: #bcd0f5; color: var(--mk-navy); }
#ppilot-tests-catalogue-root .ppmk-btn--gold,
#ppilot-tests-catalogue-root .ppmk-btn--gold:visited { background: var(--mk-gold-2); border-color: var(--mk-gold-2); color: var(--mk-gold-ink); }
#ppilot-tests-catalogue-root .ppmk-btn--gold:hover { background: var(--mk-gold); border-color: var(--mk-gold); color: var(--mk-gold-ink); }
#ppilot-tests-catalogue-root .ppmk-btn--gold:active { background: #f59e0b; border-color: #f59e0b; color: var(--mk-gold-ink); }
#ppilot-tests-catalogue-root .ppmk-btn--text,
#ppilot-tests-catalogue-root .ppmk-btn--text:visited { min-height: 32px; padding: 0 8px; background: none; border-color: transparent; color: var(--mk-blue-hover); }
#ppilot-tests-catalogue-root .ppmk-btn--text:hover { background: var(--mk-blue-50); color: var(--mk-blue-active); }
#ppilot-tests-catalogue-root .ppmk-btn--block { display: flex; width: 100%; }

/* ---------------- hero ---------------- */
#ppilot-tests-catalogue-root .ppmk-hero-host { margin: 0 0 18px; }
#ppilot-tests-catalogue-root .ppmk-hero {
	position: relative; overflow: hidden; isolation: isolate;
	border-radius: 22px; min-height: 300px;
	background: linear-gradient(112deg, #f4f8ff 0%, #e6efff 42%, #d3e3ff 72%, #c4d8fb 100%);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 12px 32px rgba(11, 31, 69, 0.10);
}
#ppilot-tests-catalogue-root .ppmk-hero-photo,
#ppilot-tests-catalogue-root .ppmk-hero-art { position: absolute; inset: 0; z-index: 0; display: block; }
#ppilot-tests-catalogue-root .ppmk-hero-photo-img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
#ppilot-tests-catalogue-root .ppmk-hero.has-image::before {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(90deg, rgba(247, 250, 255, 0.97) 0%, rgba(247, 250, 255, 0.92) 42%, rgba(247, 250, 255, 0.78) 56%, rgba(247, 250, 255, 0) 70%);
}
#ppilot-tests-catalogue-root .ppmk-hero-sun {
	position: absolute; right: 30%; top: -60px; width: 420px; height: 420px; border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.45) 38%, rgba(255, 255, 255, 0) 70%);
}
#ppilot-tests-catalogue-root .ppmk-hero-ridges {
	position: absolute; left: 18%; right: 0; bottom: 0; width: 82%; height: 66%; display: block;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%); mask-image: linear-gradient(90deg, transparent 0%, #000 28%);
}
#ppilot-tests-catalogue-root .ppmk-hero-ridges .ppmk-ridge-far { fill: #a9c2ec; opacity: .75; }
#ppilot-tests-catalogue-root .ppmk-hero-ridges .ppmk-ridge-snow { fill: #ffffff; opacity: .9; }
#ppilot-tests-catalogue-root .ppmk-hero-ridges .ppmk-ridge-near { fill: #7ea2dc; opacity: .55; }
#ppilot-tests-catalogue-root .ppmk-hero-inner {
	position: relative; z-index: 2;
	display: grid; grid-template-columns: minmax(0, 1fr) 400px; min-height: 300px;
}
#ppilot-tests-catalogue-root .ppmk-hero-main { padding: 30px 40px 30px 44px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
#ppilot-tests-catalogue-root .ppmk-hero-badge-slot { margin: 0 0 12px; min-height: 34px; }
#ppilot-tests-catalogue-root .ppmk-hero-badge {
	display: inline-flex; align-items: center; min-height: 34px; padding: 0 18px; border-radius: 999px;
	background: var(--mk-red); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .005em;
	box-shadow: 0 6px 14px rgba(224, 24, 45, 0.25);
}
#ppilot-tests-catalogue-root .ppmk-hero-title { margin: 0 0 6px; color: var(--mk-navy); font-size: clamp(34px, 4.1vw, 58px); font-weight: 800; line-height: 1.02; letter-spacing: -0.025em; }
#ppilot-tests-catalogue-root .ppmk-hero-sub { margin: 0 0 22px; color: var(--mk-navy); font-size: clamp(17px, 1.7vw, 24px); font-weight: 700; line-height: 1.25; }
#ppilot-tests-catalogue-root .ppmk-hero-sub span { color: inherit; }
#ppilot-tests-catalogue-root .ppmk-benefits { display: flex; flex-wrap: wrap; gap: 14px 26px; margin: 0; padding: 0; list-style: none; }
#ppilot-tests-catalogue-root .ppmk-benefit { display: flex; align-items: center; gap: 10px; min-width: 0; }
#ppilot-tests-catalogue-root .ppmk-benefit-icon {
	width: 44px; height: 44px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
	background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 10px rgba(15, 23, 42, 0.06);
}
#ppilot-tests-catalogue-root .ppmk-benefit-icon .ppmk-icon { width: 23px; height: 23px; }
#ppilot-tests-catalogue-root .ppmk-benefit-icon--blue { color: #2563eb; background: #eaf1ff; }
#ppilot-tests-catalogue-root .ppmk-benefit-icon--violet { color: #7c3aed; background: #f3ecff; }
#ppilot-tests-catalogue-root .ppmk-benefit-icon--green { color: #059669; background: #e7f8f1; }
#ppilot-tests-catalogue-root .ppmk-benefit-icon--teal { color: #0f766e; background: #e6f6f4; }
#ppilot-tests-catalogue-root .ppmk-benefit-icon--sky { color: #0369a1; background: #e6f3fb; }
#ppilot-tests-catalogue-root .ppmk-benefit-icon--amber { color: #c2410c; background: #fff1e6; }
#ppilot-tests-catalogue-root .ppmk-benefit-text { display: flex; flex-direction: column; color: var(--mk-text); font-size: 14px; font-weight: 600; line-height: 1.3; }
#ppilot-tests-catalogue-root .ppmk-benefit-text span { color: var(--mk-text); }
#ppilot-tests-catalogue-root .ppmk-benefit--skeleton { width: 140px; }

#ppilot-tests-catalogue-root .ppmk-panel {
	position: relative; display: flex; flex-direction: column; justify-content: center; gap: 18px;
	padding: 28px 34px 28px 74px; color: #fff;
	background: linear-gradient(165deg, #0d2453 0%, #0b1f45 55%, #08183a 100%);
	clip-path: polygon(17% 0, 100% 0, 100% 100%, 0 100%);
}
#ppilot-tests-catalogue-root .ppmk-panel::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(120% 80% at 100% 0%, rgba(59, 130, 246, 0.28) 0%, rgba(59, 130, 246, 0) 60%);
}
#ppilot-tests-catalogue-root .ppmk-panel-list { position: relative; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
#ppilot-tests-catalogue-root .ppmk-panel-item { display: flex; align-items: center; gap: 14px; color: #fff; }
#ppilot-tests-catalogue-root .ppmk-panel-icon {
	width: 38px; height: 38px; flex: none; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--mk-gold);
}
#ppilot-tests-catalogue-root .ppmk-panel-text { display: flex; flex-direction: column; min-width: 0; }
#ppilot-tests-catalogue-root .ppmk-panel-text-title { color: #fff; font-size: 16.5px; font-weight: 700; line-height: 1.25; }
#ppilot-tests-catalogue-root .ppmk-panel-text-sub { color: #c7d6f2; font-size: 13px; font-weight: 500; line-height: 1.35; }
#ppilot-tests-catalogue-root .ppmk-panel-cta { position: relative; min-height: 50px; font-size: 16px; border-radius: 10px; align-self: stretch; box-shadow: 0 10px 22px rgba(250, 204, 21, 0.25); }

/* ---------------- browse area ---------------- */
#ppilot-tests-catalogue-root .ppmk-browse { display: block; }
#ppilot-tests-catalogue-root .ppmk-chiphost { margin: 0 0 14px; }
#ppilot-tests-catalogue-root .ppmk-chiprows { display: flex; flex-direction: column; gap: 10px; }
#ppilot-tests-catalogue-root .ppmk-scroller { position: relative; min-width: 0; }
#ppilot-tests-catalogue-root .ppmk-scroll-track {
	display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
	padding: 4px 4px 14px; margin: 0 -4px -10px; scrollbar-width: none;
}
#ppilot-tests-catalogue-root .ppmk-scroll-track::-webkit-scrollbar { display: none; }
#ppilot-tests-catalogue-root .ppmk-scroll-btn {
	position: absolute; top: 50%; z-index: 2; width: 34px; height: 34px; margin: -20px 0 0; padding: 0;
	display: none; align-items: center; justify-content: center; border-radius: 50%;
	background: #fff; border: 1px solid var(--mk-line-2); color: var(--mk-navy); box-shadow: var(--mk-shadow); cursor: pointer;
}
#ppilot-tests-catalogue-root .ppmk-scroll-btn:hover { background: var(--mk-blue-50); color: var(--mk-navy); }
#ppilot-tests-catalogue-root .ppmk-scroll-btn--prev { left: -6px; }
#ppilot-tests-catalogue-root .ppmk-scroll-btn--next { right: -6px; }
#ppilot-tests-catalogue-root .ppmk-scroller.can-prev .ppmk-scroll-btn--prev,
#ppilot-tests-catalogue-root .ppmk-scroller.can-next .ppmk-scroll-btn--next { display: inline-flex; }

#ppilot-tests-catalogue-root .ppmk-chip,
#ppilot-tests-catalogue-root .ppmk-chip:visited {
	flex: none; scroll-snap-align: start;
	display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 20px; margin: 0;
	border-radius: 999px; border: 1px solid var(--mk-line-2); background: #fff; color: var(--mk-navy);
	font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; text-transform: none; letter-spacing: 0;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); cursor: pointer; white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
#ppilot-tests-catalogue-root .ppmk-chip:hover { background: var(--mk-blue-50); border-color: #bcd0f5; color: var(--mk-navy); }
#ppilot-tests-catalogue-root .ppmk-chip:focus-visible { outline: none; box-shadow: var(--mk-focus); }
#ppilot-tests-catalogue-root .ppmk-chip.is-active { background: var(--mk-navy); border-color: var(--mk-navy); color: #fff; box-shadow: 0 6px 14px rgba(11, 31, 69, 0.22); }
#ppilot-tests-catalogue-root .ppmk-chip.is-active:hover { background: var(--mk-navy-2); border-color: var(--mk-navy-2); color: #fff; }
#ppilot-tests-catalogue-root .ppmk-chip-label { color: inherit; font: inherit; }
#ppilot-tests-catalogue-root .ppmk-chip-count {
	display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 7px;
	border-radius: 999px; background: #e8eef8; color: var(--mk-navy); font-size: 12.5px; font-weight: 700;
}
#ppilot-tests-catalogue-root .ppmk-chip.is-active .ppmk-chip-count { background: #fff; color: var(--mk-navy); }
#ppilot-tests-catalogue-root .ppmk-chip-thumb {
	width: 28px; height: 28px; margin-left: -10px; flex: none; border-radius: 50%; overflow: hidden;
	display: inline-flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, #1e3a8a, #2563eb); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .02em;
}
#ppilot-tests-catalogue-root .ppmk-chip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
#ppilot-tests-catalogue-root .ppmk-chip-thumb span { color: #fff; }
#ppilot-tests-catalogue-root .ppmk-chip.is-active .ppmk-chip-thumb { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7); }
#ppilot-tests-catalogue-root .ppmk-chip--sub,
#ppilot-tests-catalogue-root .ppmk-chip--sub:visited { min-height: 38px; font-size: 14px; padding: 0 14px; }
#ppilot-tests-catalogue-root .ppmk-chip--sub .ppmk-chip-thumb { width: 24px; height: 24px; margin-left: -6px; }

/* ---------------- compact filter row ---------------- */
#ppilot-tests-catalogue-root .ppmk-toolbar { margin: 0 0 16px; }
#ppilot-tests-catalogue-root .ppmk-filterbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#ppilot-tests-catalogue-root .ppmk-filterbar-fields { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
#ppilot-tests-catalogue-root .ppmk-filterbar-fields > .ppmk-search { flex: 1.25 1 0; }
#ppilot-tests-catalogue-root .ppmk-filterbar-selects > .ppmk-field { flex: 1 1 0; max-width: 200px; }
#ppilot-tests-catalogue-root .ppmk-filterbar-selects .ppmk-select { width: 100%; min-width: 0; max-width: none; }
#ppilot-tests-catalogue-root .ppmk-filterbar-selects { display: contents; }
#ppilot-tests-catalogue-root .ppmk-filterbar-sort { display: flex; align-items: center; gap: 10px; flex: none; }
#ppilot-tests-catalogue-root .ppmk-search { position: relative; display: flex; align-items: center; flex: 0 1 300px; min-width: 210px; max-width: 320px; margin: 0; }
#ppilot-tests-catalogue-root .ppmk-search-icon { position: absolute; left: 13px; top: 50%; margin-top: -9px; color: #64748b; display: inline-flex; pointer-events: none; }
#ppilot-tests-catalogue-root .ppmk-search-input {
	width: 100%; height: 42px; min-height: 42px; margin: 0; padding: 0 38px 0 40px;
	border: 1px solid var(--mk-line-2); border-radius: 10px; background: #fff; color: var(--mk-ink);
	font-family: inherit; font-size: 14px; line-height: 1.2; box-shadow: none; -webkit-appearance: none; appearance: none;
}
#ppilot-tests-catalogue-root .ppmk-search-input::placeholder { color: #64748b; opacity: 1; }
#ppilot-tests-catalogue-root .ppmk-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
#ppilot-tests-catalogue-root .ppmk-search-input:focus { outline: none; border-color: var(--mk-blue); box-shadow: var(--mk-focus); }
#ppilot-tests-catalogue-root .ppmk-search-clear {
	position: absolute; right: 6px; top: 50%; width: 30px; height: 30px; margin: -15px 0 0; padding: 0;
	display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px;
	background: transparent; color: #475569; cursor: pointer;
}
#ppilot-tests-catalogue-root .ppmk-search-clear[hidden] { display: none; }
#ppilot-tests-catalogue-root .ppmk-search-clear:hover { background: #eef2f7; color: var(--mk-ink); }
#ppilot-tests-catalogue-root .ppmk-search-clear:focus-visible { outline: none; box-shadow: var(--mk-focus); }
#ppilot-tests-catalogue-root .ppmk-field { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#ppilot-tests-catalogue-root .ppmk-field-label { color: var(--mk-muted); font-size: 12.5px; font-weight: 700; }
#ppilot-tests-catalogue-root .ppmk-select-wrap { position: relative; display: flex; align-items: center; }
#ppilot-tests-catalogue-root .ppmk-select {
	height: 42px; min-height: 42px; width: auto; min-width: 118px; max-width: 220px; margin: 0; padding: 0 32px 0 12px;
	border: 1px solid var(--mk-line-2); border-radius: 10px; background: #fff; color: var(--mk-ink);
	font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.2; text-overflow: ellipsis;
	-webkit-appearance: none; -moz-appearance: none; appearance: none; box-shadow: none; cursor: pointer;
}
#ppilot-tests-catalogue-root .ppmk-select:hover { border-color: #b4c3da; }
#ppilot-tests-catalogue-root .ppmk-select:focus { outline: none; border-color: var(--mk-blue); box-shadow: var(--mk-focus); }
#ppilot-tests-catalogue-root .ppmk-select.has-value { border-color: #9db8ea; background: var(--mk-blue-50); color: var(--mk-navy); font-weight: 600; }
#ppilot-tests-catalogue-root .ppmk-select:disabled { cursor: not-allowed; background: #f1f5f9; color: #64748b; border-color: var(--mk-line); }
#ppilot-tests-catalogue-root .ppmk-select-caret { position: absolute; right: 10px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: #475569; pointer-events: none; }
#ppilot-tests-catalogue-root .ppmk-select-lead { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--mk-navy); pointer-events: none; }
#ppilot-tests-catalogue-root .ppmk-field--sort .ppmk-select { padding-left: 34px; min-width: 150px; font-weight: 600; color: var(--mk-navy); }
#ppilot-tests-catalogue-root .ppmk-viewtoggle { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--mk-line-2); border-radius: 10px; background: #fff; }
#ppilot-tests-catalogue-root .ppmk-viewtoggle-btn {
	width: 36px; height: 34px; padding: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center;
	border: 0; border-radius: 8px; background: transparent; color: #475569; cursor: pointer; box-shadow: none;
}
#ppilot-tests-catalogue-root .ppmk-viewtoggle-btn:hover { background: #eef2f7; color: var(--mk-navy); }
#ppilot-tests-catalogue-root .ppmk-viewtoggle-btn.is-active { background: var(--mk-navy); color: #fff; }
#ppilot-tests-catalogue-root .ppmk-viewtoggle-btn:focus-visible { outline: none; box-shadow: var(--mk-focus); }
#ppilot-tests-catalogue-root .ppmk-filters-btn { display: none; }
#ppilot-tests-catalogue-root .ppmk-filters-count {
	display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
	border-radius: 999px; background: var(--mk-navy); color: #fff; font-size: 11.5px; font-weight: 700;
}

/* ---------------- results head / active filters ---------------- */
#ppilot-tests-catalogue-root .ppmk-results-head { margin: 0 0 14px; }
#ppilot-tests-catalogue-root .ppmk-results-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
#ppilot-tests-catalogue-root .ppmk-results-title { margin: 0; color: var(--mk-navy); font-size: 19px; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; }
#ppilot-tests-catalogue-root .ppmk-results-title:focus { outline: none; }
#ppilot-tests-catalogue-root .ppmk-results-title:focus-visible { outline: none; box-shadow: var(--mk-focus); border-radius: 6px; }
#ppilot-tests-catalogue-root .ppmk-results-sub { margin: 0; color: var(--mk-muted); font-size: 13.5px; }
#ppilot-tests-catalogue-root .ppmk-active-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; }
#ppilot-tests-catalogue-root .ppmk-active-chip {
	display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px 0 12px; margin: 0;
	border: 1px solid #bcd0f5; border-radius: 999px; background: var(--mk-blue-50); color: var(--mk-navy);
	font-family: inherit; font-size: 13px; font-weight: 600; text-transform: none; cursor: pointer; box-shadow: none;
}
#ppilot-tests-catalogue-root .ppmk-active-chip:hover { background: var(--mk-blue-100); color: var(--mk-navy); }
#ppilot-tests-catalogue-root .ppmk-active-chip:focus-visible { outline: none; box-shadow: var(--mk-focus); }
#ppilot-tests-catalogue-root .ppmk-active-chip .ppmk-icon { width: 14px; height: 14px; }

/* ---------------- grid + card ---------------- */
#ppilot-tests-catalogue-root .ppmk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
#ppilot-tests-catalogue-root .ppmk-card {
	position: relative; display: flex; flex-direction: column; min-width: 0;
	background: var(--mk-surface); border: 1px solid #e3e9f2; border-radius: var(--mk-radius); overflow: hidden;
	box-shadow: var(--mk-shadow); container-type: inline-size;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
#ppilot-tests-catalogue-root .ppmk-card:hover { box-shadow: var(--mk-shadow-hover); transform: translateY(-2px); border-color: #d6e0ee; }
#ppilot-tests-catalogue-root .ppmk-card-media,
#ppilot-tests-catalogue-root .ppmk-modal-media {
	position: relative; overflow: hidden; aspect-ratio: 2 / 1; background: #0b1f45;
}
#ppilot-tests-catalogue-root .ppmk-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
#ppilot-tests-catalogue-root .ppmk-tone--bg-navy { background: linear-gradient(135deg, #0b1f45 0%, #17408f 100%); }
#ppilot-tests-catalogue-root .ppmk-tone--bg-royal { background: linear-gradient(135deg, #102a6b 0%, #2563eb 100%); }
#ppilot-tests-catalogue-root .ppmk-tone--bg-teal { background: linear-gradient(135deg, #0b2f45 0%, #0f766e 100%); }
#ppilot-tests-catalogue-root .ppmk-tone--bg-indigo { background: linear-gradient(135deg, #1e1b4b 0%, #4338ca 100%); }
#ppilot-tests-catalogue-root .ppmk-tone--bg-slate { background: linear-gradient(135deg, #0f172a 0%, #334e7a 100%); }
#ppilot-tests-catalogue-root .ppmk-tone--bg-ocean { background: linear-gradient(135deg, #082f49 0%, #0369a1 100%); }
#ppilot-tests-catalogue-root .ppmk-cover-art { position: absolute; inset: 0; display: block; pointer-events: none; }
#ppilot-tests-catalogue-root .ppmk-cover-ridges { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 58%; display: block; }
#ppilot-tests-catalogue-root .ppmk-cover-ridges .ppmk-ridge-far { fill: #ffffff; opacity: .12; }
#ppilot-tests-catalogue-root .ppmk-cover-ridges .ppmk-ridge-snow { fill: #ffffff; opacity: .28; }
#ppilot-tests-catalogue-root .ppmk-cover-ridges .ppmk-ridge-near { fill: #ffffff; opacity: .10; }
#ppilot-tests-catalogue-root .ppmk-cover-mono {
	position: absolute; right: 14px; top: 50%; transform: translateY(-46%);
	color: rgba(255, 255, 255, 0.13); font-size: 86px; font-weight: 900; line-height: 1; letter-spacing: -0.04em;
}
#ppilot-tests-catalogue-root .ppmk-card-overlay {
	position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 44px 16px 16px;
	background: linear-gradient(90deg, rgba(7, 18, 44, 0.78) 0%, rgba(7, 18, 44, 0.5) 46%, rgba(7, 18, 44, 0.05) 82%), linear-gradient(0deg, rgba(7, 18, 44, 0.55) 0%, rgba(7, 18, 44, 0) 60%);
}
#ppilot-tests-catalogue-root .ppmk-media.is-placeholder .ppmk-card-overlay,
#ppilot-tests-catalogue-root .ppmk-card-media.is-placeholder .ppmk-card-overlay { background: linear-gradient(90deg, rgba(7, 18, 44, 0.35) 0%, rgba(7, 18, 44, 0) 70%); }
#ppilot-tests-catalogue-root .ppmk-card-title { margin: 0; display: flex; flex-direction: column; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); max-width: 92%; }
#ppilot-tests-catalogue-root .ppmk-card-title-main {
	color: #fff; font-size: 25px; font-weight: 800; line-height: 1.06; letter-spacing: -0.02em;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#ppilot-tests-catalogue-root .ppmk-card-title-sub { margin-top: 3px; color: #e6edf9; font-size: 16px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ppilot-tests-catalogue-root .ppmk-card-badges { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
#ppilot-tests-catalogue-root .ppmk-card-flags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
#ppilot-tests-catalogue-root .ppmk-badge {
	display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 11px; border-radius: 999px;
	font-size: 12.5px; font-weight: 700; line-height: 1; white-space: nowrap;
}
#ppilot-tests-catalogue-root .ppmk-badge .ppmk-icon { width: 13px; height: 13px; }
#ppilot-tests-catalogue-root .ppmk-badge--count { background: var(--mk-red); color: #fff; box-shadow: 0 4px 10px rgba(224, 24, 45, 0.3); }
#ppilot-tests-catalogue-root .ppmk-badge--new { background: #fff; color: var(--mk-navy); }
#ppilot-tests-catalogue-root .ppmk-badge--popular { background: var(--mk-gold-2); color: var(--mk-gold-ink); }
#ppilot-tests-catalogue-root .ppmk-badge--free { background: #dcfce7; color: #065f46; }
#ppilot-tests-catalogue-root .ppmk-badge--off { background: #16a34a; color: #fff; box-shadow: 0 4px 10px rgba(22, 163, 74, 0.3); }
#ppilot-tests-catalogue-root .ppmk-card-body { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; padding: 14px 14px 14px; min-width: 0; }
#ppilot-tests-catalogue-root .ppmk-card-desc { margin: 0; color: var(--mk-body); font-size: 13.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#ppilot-tests-catalogue-root .ppmk-featrow {
	display: flex; gap: 4px;
	margin: 0; padding: 0 0 12px; list-style: none; border-bottom: 1px solid #edf1f7;
}
#ppilot-tests-catalogue-root .ppmk-featrow-item { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1 1 0; min-width: 0; text-align: center; }
#ppilot-tests-catalogue-root .ppmk-featrow-icon {
	width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex: none;
	background: #f1f5fb;
}
#ppilot-tests-catalogue-root .ppmk-featrow-icon .ppmk-icon { width: 18px; height: 18px; }
#ppilot-tests-catalogue-root .ppmk-featrow-label {
	color: var(--mk-body); font-size: 11px; font-weight: 500; line-height: 1.2; max-width: 100%;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	overflow-wrap: anywhere; word-break: normal; -webkit-hyphens: auto; hyphens: auto;
}
#ppilot-tests-catalogue-root .ppmk-tone--file,
#ppilot-tests-catalogue-root .ppmk-tone--all { color: #2563eb; background: #eaf1ff; }
#ppilot-tests-catalogue-root .ppmk-tone--history { color: #b45309; background: #fff4e5; }
#ppilot-tests-catalogue-root .ppmk-tone--layers { color: #c2410c; background: #fff0e8; }
#ppilot-tests-catalogue-root .ppmk-tone--globe { color: #0369a1; background: #e8f4fb; }
#ppilot-tests-catalogue-root .ppmk-tone--target { color: #dc2626; background: #feecec; }
#ppilot-tests-catalogue-root .ppmk-tone--spark { color: #7c3aed; background: #f3ecff; }
#ppilot-tests-catalogue-root .ppmk-tone--check { color: #15803d; background: #e8f7ee; }
#ppilot-tests-catalogue-root .ppmk-tone--book { color: #0f766e; background: #e6f6f4; }
#ppilot-tests-catalogue-root .ppmk-tone--chart { color: #c2410c; background: #fff1e6; }
#ppilot-tests-catalogue-root .ppmk-tone--review { color: #be185d; background: #fdeef5; }
#ppilot-tests-catalogue-root .ppmk-tone--language { color: #4338ca; background: #eef0ff; }
#ppilot-tests-catalogue-root .ppmk-card-match { display: flex; align-items: center; gap: 6px; margin: -4px 0 0; color: var(--mk-blue-hover); font-size: 12.5px; font-weight: 600; }
#ppilot-tests-catalogue-root .ppmk-card-match .ppmk-icon { width: 15px; height: 15px; }
#ppilot-tests-catalogue-root .ppmk-card-foot { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
#ppilot-tests-catalogue-root .ppmk-cardprice { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: nowrap; min-height: 32px; }
#ppilot-tests-catalogue-root .ppmk-cardprice-amounts { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
#ppilot-tests-catalogue-root .ppmk-price-current { color: var(--mk-ink); font-size: 24px; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; }
#ppilot-tests-catalogue-root .ppmk-price-current--free { color: var(--mk-green); }
#ppilot-tests-catalogue-root .ppmk-price-current--muted { color: var(--mk-navy); font-size: 19px; }
#ppilot-tests-catalogue-root .ppmk-price-original { color: #64748b; font-size: 15px; font-weight: 500; text-decoration: line-through; text-decoration-thickness: 1.5px; }
#ppilot-tests-catalogue-root .ppmk-price-off { display: inline-flex; align-items: center; min-height: 20px; padding: 0 7px; border-radius: 6px; background: #dcfce7; color: #065f46; font-size: 11.5px; font-weight: 800; }
#ppilot-tests-catalogue-root .ppmk-price-note { margin: 0; color: var(--mk-muted); font-size: 12.5px; }
#ppilot-tests-catalogue-root .ppmk-duration-pill {
	display: inline-flex; align-items: center; gap: 5px; flex: none; min-height: 28px; padding: 0 11px; border-radius: 999px;
	background: #eaf1ff; color: #1e40af; font-size: 12px; font-weight: 700; white-space: nowrap;
}
#ppilot-tests-catalogue-root .ppmk-duration-pill .ppmk-icon { width: 14px; height: 14px; }
#ppilot-tests-catalogue-root .ppmk-duration-pill--free { background: #e7f8ef; color: #065f46; }
#ppilot-tests-catalogue-root .ppmk-duration-pill--muted { background: #f1f5f9; color: #334155; }
#ppilot-tests-catalogue-root .ppmk-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#ppilot-tests-catalogue-root .ppmk-card-actions .ppmk-btn { min-height: 42px; padding: 0 10px; font-size: 14px; border-radius: 9px; }
#ppilot-tests-catalogue-root .ppmk-card-actions .ppmk-btn--primary,
#ppilot-tests-catalogue-root .ppmk-card-actions .ppmk-btn--primary:visited { background: var(--mk-navy); border-color: var(--mk-navy); color: #fff; }
#ppilot-tests-catalogue-root .ppmk-card-actions .ppmk-btn--primary:hover { background: var(--mk-navy-2); border-color: var(--mk-navy-2); color: #fff; }
#ppilot-tests-catalogue-root .ppmk-card-actions .ppmk-btn--secondary,
#ppilot-tests-catalogue-root .ppmk-card-actions .ppmk-btn--secondary:visited { background: #eef2f7; border-color: #eef2f7; color: var(--mk-navy); }

/* card internals follow the CARD width (container query), so 4 columns stay tidy on small laptops */
@container (max-width: 270px) {
	#ppilot-tests-catalogue-root .ppmk-featrow-item:nth-child(n+5) { display: none; }
	#ppilot-tests-catalogue-root .ppmk-card-flags .ppmk-badge:nth-child(n+2) { display: none; }
	#ppilot-tests-catalogue-root .ppmk-card-title-main { font-size: 19px; }
	#ppilot-tests-catalogue-root .ppmk-card-actions .ppmk-btn-arrow,
	#ppilot-tests-catalogue-root .ppmk-duration-pill .ppmk-icon { display: none; }
	#ppilot-tests-catalogue-root .ppmk-cardprice-amounts { gap: 5px; }
	#ppilot-tests-catalogue-root .ppmk-card-title-sub { font-size: 14px; }
	#ppilot-tests-catalogue-root .ppmk-featrow-label { font-size: 10px; }
	#ppilot-tests-catalogue-root .ppmk-featrow-icon { width: 28px; height: 28px; }
	#ppilot-tests-catalogue-root .ppmk-price-current { font-size: 20px; }
	#ppilot-tests-catalogue-root .ppmk-price-original { font-size: 12.5px; }
	#ppilot-tests-catalogue-root .ppmk-duration-pill { padding: 0 8px; font-size: 11px; }
	#ppilot-tests-catalogue-root .ppmk-card-overlay { padding-top: 48px; }
	#ppilot-tests-catalogue-root .ppmk-card-actions { gap: 8px; }
	#ppilot-tests-catalogue-root .ppmk-card-actions .ppmk-btn { font-size: 13px; padding: 0 6px; }
}

/* sparse catalogue: "More test series coming soon" fills the rest of the first row */
#ppilot-tests-catalogue-root .ppmk-soon {
	grid-column: span var(--ppmk-span, 3); position: relative; overflow: hidden;
	display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px;
	min-height: 260px; padding: 28px 24px; border-radius: var(--mk-radius);
	border: 1.5px dashed #c3d3ea; background: linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%);
}
#ppilot-tests-catalogue-root .ppmk-soon-art { position: absolute; left: 0; right: 0; bottom: 0; height: 45%; display: block; pointer-events: none; }
#ppilot-tests-catalogue-root .ppmk-soon-ridges { width: 100%; height: 100%; display: block; }
#ppilot-tests-catalogue-root .ppmk-soon-ridges .ppmk-ridge-far { fill: #dbe7fb; }
#ppilot-tests-catalogue-root .ppmk-soon-ridges .ppmk-ridge-snow { fill: #ffffff; }
#ppilot-tests-catalogue-root .ppmk-soon-ridges .ppmk-ridge-near { fill: #cddcf6; opacity: .7; }
#ppilot-tests-catalogue-root .ppmk-soon-icon {
	position: relative; width: 54px; height: 54px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;
	background: #fff; color: var(--mk-blue); box-shadow: var(--mk-shadow);
}
#ppilot-tests-catalogue-root .ppmk-soon-icon .ppmk-icon { width: 26px; height: 26px; }
#ppilot-tests-catalogue-root .ppmk-soon-title { position: relative; margin: 6px 0 0; color: var(--mk-navy); font-size: 20px; font-weight: 800; line-height: 1.3; }
#ppilot-tests-catalogue-root .ppmk-soon-text { position: relative; margin: 0; max-width: 420px; color: var(--mk-body); font-size: 14px; line-height: 1.55; }

/* list view (presentation only, desktop/tablet) */
#ppilot-tests-catalogue-root .ppmk-grid--list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
#ppilot-tests-catalogue-root .ppmk-grid--list .ppmk-card { flex-direction: row; }
#ppilot-tests-catalogue-root .ppmk-grid--list .ppmk-card-media { flex: 0 0 360px; aspect-ratio: auto; min-height: 190px; }
#ppilot-tests-catalogue-root .ppmk-grid--list .ppmk-card-body { padding: 18px 20px; }
#ppilot-tests-catalogue-root .ppmk-grid--list .ppmk-featrow { justify-content: flex-start; }
#ppilot-tests-catalogue-root .ppmk-grid--list .ppmk-featrow-item { flex: 0 0 92px; }
#ppilot-tests-catalogue-root .ppmk-grid--list .ppmk-card-foot { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
#ppilot-tests-catalogue-root .ppmk-grid--list .ppmk-cardprice { justify-content: flex-start; gap: 14px; }
#ppilot-tests-catalogue-root .ppmk-grid--list .ppmk-card-actions { flex: 0 0 330px; }

/* ---------------- skeletons ---------------- */
#ppilot-tests-catalogue-root .ppmk-skel { display: block; border-radius: 8px; background: linear-gradient(90deg, #e9eef6 0%, #f4f7fb 50%, #e9eef6 100%); background-size: 200% 100%; animation: ppmk-shimmer 1.3s ease-in-out infinite; }
#ppilot-tests-catalogue-root .ppmk-skel--dark { background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.08) 100%); background-size: 200% 100%; }
#ppilot-tests-catalogue-root .ppmk-skel--media { aspect-ratio: 2 / 1; border-radius: 0; }
#ppilot-tests-catalogue-root .ppmk-skel--feats { height: 52px; }
#ppilot-tests-catalogue-root .ppmk-skel--line { height: 14px; }
#ppilot-tests-catalogue-root .ppmk-skel--btns { height: 42px; }
#ppilot-tests-catalogue-root .ppmk-skel--badge { width: 210px; height: 34px; border-radius: 999px; }
#ppilot-tests-catalogue-root .ppmk-skel--icon { width: 44px; height: 44px; border-radius: 12px; flex: none; }
#ppilot-tests-catalogue-root .ppmk-skel--chip { width: 128px; height: 44px; border-radius: 999px; flex: none; }
#ppilot-tests-catalogue-root .ppmk-skel--field { width: 150px; height: 42px; border-radius: 10px; }
#ppilot-tests-catalogue-root .ppmk-skel--stats { height: 96px; }
#ppilot-tests-catalogue-root .ppmk-skel--w40 { width: 40%; }
#ppilot-tests-catalogue-root .ppmk-skel--w50 { width: 50%; }
#ppilot-tests-catalogue-root .ppmk-skel--w60 { width: 60%; }
#ppilot-tests-catalogue-root .ppmk-skel--w70 { width: 70%; }
#ppilot-tests-catalogue-root .ppmk-skel--w80 { width: 80%; }
#ppilot-tests-catalogue-root .ppmk-card--skeleton:hover { transform: none; box-shadow: var(--mk-shadow); }
@keyframes ppmk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ---------------- empty / error / load more ---------------- */
#ppilot-tests-catalogue-root .ppmk-state {
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
	padding: 48px 24px; border-radius: var(--mk-radius); background: #fff; border: 1px solid var(--mk-line); box-shadow: var(--mk-shadow);
}
#ppilot-tests-catalogue-root .ppmk-state-icon { width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: var(--mk-blue-50); color: var(--mk-blue); }
#ppilot-tests-catalogue-root .ppmk-state--error .ppmk-state-icon { background: #fef2f2; color: #b91c1c; }
#ppilot-tests-catalogue-root .ppmk-state-icon .ppmk-icon { width: 26px; height: 26px; }
#ppilot-tests-catalogue-root .ppmk-state-title { margin: 4px 0 0; color: var(--mk-navy); font-size: 19px; font-weight: 800; line-height: 1.3; }
#ppilot-tests-catalogue-root .ppmk-state-text { margin: 0 0 6px; color: var(--mk-body); font-size: 14px; }
#ppilot-tests-catalogue-root .ppmk-more { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 26px 0 0; }
#ppilot-tests-catalogue-root .ppmk-more-status { margin: 0; color: var(--mk-muted); font-size: 13.5px; }
#ppilot-tests-catalogue-root .ppmk-more-error { margin: 0; color: #b91c1c; font-size: 13.5px; font-weight: 600; }

/* ---------------- Filters sheet (phones) ---------------- */
#ppilot-tests-catalogue-root .ppmk-drawer-overlay { position: fixed; inset: 0; z-index: 100000; background: rgba(2, 6, 23, 0.55); display: flex; align-items: flex-end; justify-content: center; }
#ppilot-tests-catalogue-root .ppmk-drawer {
	display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: 86vh;
	background: #fff; border-radius: 20px 20px 0 0; box-shadow: 0 -12px 40px rgba(2, 6, 23, 0.25);
	animation: ppmk-sheet-in .22s ease-out;
}
@keyframes ppmk-sheet-in { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
#ppilot-tests-catalogue-root .ppmk-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 12px 20px; border-bottom: 1px solid var(--mk-line); }
#ppilot-tests-catalogue-root .ppmk-drawer-title { margin: 0; color: var(--mk-navy); font-size: 18px; font-weight: 800; }
#ppilot-tests-catalogue-root .ppmk-drawer-close,
#ppilot-tests-catalogue-root .ppmk-modal-close {
	width: 40px; height: 40px; padding: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--mk-line); border-radius: 50%; background: #fff; color: var(--mk-navy); cursor: pointer; box-shadow: none;
}
#ppilot-tests-catalogue-root .ppmk-drawer-close:hover,
#ppilot-tests-catalogue-root .ppmk-modal-close:hover { background: #eef2f7; color: var(--mk-ink); }
#ppilot-tests-catalogue-root .ppmk-drawer-close:focus-visible,
#ppilot-tests-catalogue-root .ppmk-modal-close:focus-visible { outline: none; box-shadow: var(--mk-focus); }
#ppilot-tests-catalogue-root .ppmk-drawer-body { display: flex; flex-direction: column; gap: 14px; padding: 16px 20px; overflow-y: auto; }
#ppilot-tests-catalogue-root .ppmk-drawer-body .ppmk-field--stack .ppmk-select { width: 100%; max-width: none; min-height: 46px; height: 46px; font-size: 15px; }
#ppilot-tests-catalogue-root .ppmk-drawer-foot { display: flex; gap: 10px; padding: 12px 20px 16px; border-top: 1px solid var(--mk-line); }
#ppilot-tests-catalogue-root .ppmk-drawer-foot .ppmk-btn { min-height: 46px; flex: 1 1 0; }

/* ---------------- View Details dialog ---------------- */
#ppilot-tests-catalogue-root .ppmk-modal-overlay {
	position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-start; justify-content: center;
	padding: 28px 20px; background: rgba(2, 6, 23, 0.6); overflow-y: auto;
}
#ppilot-tests-catalogue-root .ppmk-modal {
	position: relative; width: 100%; max-width: 1100px; max-height: calc(100vh - 56px); overflow-y: auto; overscroll-behavior: contain;
	background: #fff; border-radius: 22px; box-shadow: 0 30px 80px rgba(2, 6, 23, 0.35);
}
#ppilot-tests-catalogue-root .ppmk-modal-close { position: absolute; top: 14px; right: 14px; z-index: 5; box-shadow: var(--mk-shadow); }
#ppilot-tests-catalogue-root .ppmk-modal-hero {
	display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; padding: 24px;
	background: linear-gradient(180deg, #f3f7ff 0%, #ffffff 100%); border-bottom: 1px solid var(--mk-line);
}
#ppilot-tests-catalogue-root .ppmk-modal-media { aspect-ratio: 16 / 9; border-radius: 16px; box-shadow: var(--mk-shadow); align-self: start; }
#ppilot-tests-catalogue-root .ppmk-modal-info { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 6px 44px 0 0; }
#ppilot-tests-catalogue-root .ppmk-modal-eyebrow { margin: 0; color: var(--mk-blue-hover); font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
#ppilot-tests-catalogue-root .ppmk-modal-title { margin: 0; color: var(--mk-navy); font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; }
#ppilot-tests-catalogue-root .ppmk-modal-title--plain { font-size: 20px; }
#ppilot-tests-catalogue-root .ppmk-modal-desc { margin: 0; color: var(--mk-body); font-size: 15px; line-height: 1.6; }
#ppilot-tests-catalogue-root .ppmk-modal-tags { display: flex; flex-wrap: wrap; gap: 8px; }
#ppilot-tests-catalogue-root .ppmk-tag,
#ppilot-tests-catalogue-root .ppmk-access {
	display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 999px;
	background: #eef2f7; color: var(--mk-navy); font-size: 13px; font-weight: 700;
}
#ppilot-tests-catalogue-root .ppmk-tag .ppmk-icon,
#ppilot-tests-catalogue-root .ppmk-access .ppmk-icon { width: 15px; height: 15px; }
#ppilot-tests-catalogue-root .ppmk-tag--new { background: #eef4ff; color: #1e40af; }
#ppilot-tests-catalogue-root .ppmk-access--premium { background: #fff6db; color: #7a4b00; }
#ppilot-tests-catalogue-root .ppmk-access--mixed { background: #eef4ff; color: #1e3a8a; }
#ppilot-tests-catalogue-root .ppmk-access--free { background: #e7f8ef; color: #065f46; }
#ppilot-tests-catalogue-root .ppmk-modal-price { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--mk-line); }
#ppilot-tests-catalogue-root .ppmk-modal-price .ppmk-price-current { font-size: 30px; }
#ppilot-tests-catalogue-root .ppmk-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#ppilot-tests-catalogue-root .ppmk-modal-actions .ppmk-btn { min-height: 48px; padding: 0 22px; font-size: 15px; }
#ppilot-tests-catalogue-root .ppmk-modal-actions .ppmk-btn--primary,
#ppilot-tests-catalogue-root .ppmk-modal-actions .ppmk-btn--primary:visited { background: var(--mk-navy); border-color: var(--mk-navy); color: #fff; }
#ppilot-tests-catalogue-root .ppmk-modal-actions .ppmk-btn--primary:hover { background: var(--mk-navy-2); border-color: var(--mk-navy-2); color: #fff; }
#ppilot-tests-catalogue-root .ppmk-modal-pending { display: flex; flex-direction: column; gap: 16px; padding: 28px; }
#ppilot-tests-catalogue-root .ppmk-modal-pending .ppmk-skel--media { aspect-ratio: 3 / 1; border-radius: 14px; }
#ppilot-tests-catalogue-root .ppmk-modal-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 22px 24px 26px; }
#ppilot-tests-catalogue-root .ppmk-dsec { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px 18px 20px; border: 1px solid var(--mk-line); border-radius: 16px; background: #fff; }
#ppilot-tests-catalogue-root .ppmk-dsec-title { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--mk-navy); font-size: 17px; font-weight: 800; line-height: 1.3; }
#ppilot-tests-catalogue-root .ppmk-dsec-icon { width: 34px; height: 34px; flex: none; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--mk-blue-50); color: var(--mk-blue); }
#ppilot-tests-catalogue-root .ppmk-dsec-sub { margin: 4px 0 0; color: var(--mk-muted); font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
#ppilot-tests-catalogue-root .ppmk-dsec-lead { margin: 0; color: var(--mk-body); font-size: 14px; }
#ppilot-tests-catalogue-root .ppmk-included { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
#ppilot-tests-catalogue-root .ppmk-included-item { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--mk-soft); border: 1px solid #edf1f7; }
#ppilot-tests-catalogue-root .ppmk-included-item .ppmk-featrow-icon { grid-row: span 2; }
#ppilot-tests-catalogue-root .ppmk-included-name { color: var(--mk-ink); font-size: 14px; font-weight: 700; line-height: 1.25; }
#ppilot-tests-catalogue-root .ppmk-included-count { color: var(--mk-muted); font-size: 12.5px; }
#ppilot-tests-catalogue-root .ppmk-format-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
#ppilot-tests-catalogue-root .ppmk-format { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: 999px; background: #eef2f7; }
#ppilot-tests-catalogue-root .ppmk-format-label { color: var(--mk-ink); font-size: 13px; font-weight: 700; }
#ppilot-tests-catalogue-root .ppmk-format-count { color: var(--mk-muted); font-size: 12.5px; }
#ppilot-tests-catalogue-root .ppmk-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
#ppilot-tests-catalogue-root .ppmk-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: var(--mk-soft); border: 1px solid #edf1f7; }
#ppilot-tests-catalogue-root .ppmk-stat-icon { color: var(--mk-blue); display: inline-flex; margin-bottom: 4px; }
#ppilot-tests-catalogue-root .ppmk-stat-value { color: var(--mk-navy); font-size: 24px; font-weight: 800; line-height: 1.1; }
#ppilot-tests-catalogue-root .ppmk-stat-label { color: var(--mk-muted); font-size: 12.5px; font-weight: 600; }
#ppilot-tests-catalogue-root .ppmk-diffwrap { display: flex; flex-direction: column; gap: 8px; }
#ppilot-tests-catalogue-root .ppmk-diffbar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: #eef2f7; }
#ppilot-tests-catalogue-root .ppmk-diffbar-seg { display: block; flex-basis: 0; min-width: 6px; }
#ppilot-tests-catalogue-root .ppmk-diffbar-seg.ppmk-diff--easy { background: #22c55e; }
#ppilot-tests-catalogue-root .ppmk-diffbar-seg.ppmk-diff--medium { background: #f59e0b; }
#ppilot-tests-catalogue-root .ppmk-diffbar-seg.ppmk-diff--hard { background: #ef4444; }
#ppilot-tests-catalogue-root .ppmk-diff-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
#ppilot-tests-catalogue-root .ppmk-diff { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 12px; border-radius: 999px; background: #eef2f7; }
#ppilot-tests-catalogue-root .ppmk-diff::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; }
#ppilot-tests-catalogue-root .ppmk-diff--easy::before { background: #16a34a; }
#ppilot-tests-catalogue-root .ppmk-diff--medium::before { background: #d97706; }
#ppilot-tests-catalogue-root .ppmk-diff--hard::before { background: #dc2626; }
#ppilot-tests-catalogue-root .ppmk-diff-label { color: var(--mk-ink); font-size: 13px; font-weight: 700; }
#ppilot-tests-catalogue-root .ppmk-diff-count { color: var(--mk-muted); font-size: 12.5px; font-weight: 600; }
#ppilot-tests-catalogue-root .ppmk-why { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
#ppilot-tests-catalogue-root .ppmk-why-item { display: flex; align-items: flex-start; gap: 12px; }
#ppilot-tests-catalogue-root .ppmk-why-icon { width: 34px; height: 34px; flex: none; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: #e7f8ef; color: #047857; }
#ppilot-tests-catalogue-root .ppmk-why-text { display: flex; flex-direction: column; min-width: 0; }
#ppilot-tests-catalogue-root .ppmk-why-title { color: var(--mk-ink); font-size: 14.5px; font-weight: 700; line-height: 1.3; }
#ppilot-tests-catalogue-root .ppmk-why-sub { color: var(--mk-muted); font-size: 13px; line-height: 1.45; }
#ppilot-tests-catalogue-root .ppmk-access-box { display: flex; flex-direction: column; gap: 12px; }
#ppilot-tests-catalogue-root .ppmk-access-facts { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
#ppilot-tests-catalogue-root .ppmk-access-facts li { display: flex; align-items: flex-start; gap: 9px; color: var(--mk-body); font-size: 13.5px; line-height: 1.45; }
#ppilot-tests-catalogue-root .ppmk-access-facts li .ppmk-icon { width: 17px; height: 17px; margin-top: 1px; color: var(--mk-blue); }
#ppilot-tests-catalogue-root .ppmk-access-facts li span { color: var(--mk-body); }
#ppilot-tests-catalogue-root .ppmk-access-status { margin: 0; color: var(--mk-body); font-size: 13.5px; }
#ppilot-tests-catalogue-root .ppmk-access-line { display: inline-flex; align-items: center; gap: 7px; color: #334155; font-weight: 700; }
#ppilot-tests-catalogue-root .ppmk-access-line--ok { color: #047857; }
#ppilot-tests-catalogue-root .ppmk-access-line--warn { color: #b45309; }
#ppilot-tests-catalogue-root .ppmk-syllabus { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
#ppilot-tests-catalogue-root .ppmk-syl-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
#ppilot-tests-catalogue-root .ppmk-syl-name { color: var(--mk-ink); font-size: 14px; font-weight: 700; }
#ppilot-tests-catalogue-root .ppmk-syl-meta { color: var(--mk-muted); font-size: 12.5px; text-align: right; }
#ppilot-tests-catalogue-root .ppmk-syl-meter { grid-column: 1 / -1; display: block; height: 8px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
#ppilot-tests-catalogue-root .ppmk-syl-meter-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2563eb, #60a5fa); }
#ppilot-tests-catalogue-root .ppmk-faq { display: flex; flex-direction: column; gap: 8px; }
#ppilot-tests-catalogue-root .ppmk-faq-item { border: 1px solid var(--mk-line); border-radius: 12px; background: var(--mk-soft); }
#ppilot-tests-catalogue-root .ppmk-faq-q {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; cursor: pointer;
	color: var(--mk-ink); font-size: 14px; font-weight: 700; list-style: none; border-radius: 12px;
}
#ppilot-tests-catalogue-root .ppmk-faq-q::-webkit-details-marker { display: none; }
#ppilot-tests-catalogue-root .ppmk-faq-q:focus-visible { outline: none; box-shadow: var(--mk-focus); }
#ppilot-tests-catalogue-root .ppmk-faq-caret { width: 16px; height: 16px; color: #475569; transition: transform .15s ease; }
#ppilot-tests-catalogue-root .ppmk-faq-item[open] .ppmk-faq-caret { transform: rotate(180deg); }
#ppilot-tests-catalogue-root .ppmk-faq-a { margin: 0; padding: 0 14px 14px; color: var(--mk-body); font-size: 13.5px; line-height: 1.55; }
#ppilot-tests-catalogue-root .ppmk-modal-note { margin: 0; color: var(--mk-muted); font-size: 13px; }
#ppilot-tests-catalogue-root .ppmk-dsec[aria-labelledby="ppmk-d-inc"],
#ppilot-tests-catalogue-root .ppmk-dsec[aria-labelledby="ppmk-d-stats"],
#ppilot-tests-catalogue-root .ppmk-dsec[aria-labelledby="ppmk-d-exam"],
#ppilot-tests-catalogue-root .ppmk-dsec[aria-labelledby="ppmk-d-faq"] { grid-column: 1 / -1; }
#ppilot-tests-catalogue-root .ppmk-dsec[aria-labelledby="ppmk-d-inc"] .ppmk-included { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

/* ---------------- responsive ---------------- */
@media (max-width: 1199px) {
	/* small laptops / tablets: one row — search | Filters (sheet) | sort | grid/list */
	#ppilot-tests-catalogue-root .ppmk-filterbar-fields > .ppmk-search { flex: 1 1 auto; max-width: none; }
	#ppilot-tests-catalogue-root .ppmk-filterbar-selects { display: none; }
	#ppilot-tests-catalogue-root .ppmk-filters-btn { display: inline-flex; flex: none; }
	#ppilot-tests-catalogue-root .ppmk-filters-btn[hidden] { display: none; }
}
@media (max-width: 1279px) {
	#ppilot-tests-catalogue-root .ppmk-hero-inner { grid-template-columns: minmax(0, 1fr) 350px; }
	#ppilot-tests-catalogue-root .ppmk-panel { padding: 24px 26px 24px 60px; }
	#ppilot-tests-catalogue-root .ppmk-benefits { gap: 12px 18px; }
	#ppilot-tests-catalogue-root .ppmk-grid { gap: 16px; }
}
@media (max-width: 1023px) {
	#ppilot-tests-catalogue-root .ppmk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
	#ppilot-tests-catalogue-root .ppmk-soon { grid-column: span 1; }
	#ppilot-tests-catalogue-root .ppmk-hero-inner { grid-template-columns: minmax(0, 1fr) 300px; }
	#ppilot-tests-catalogue-root .ppmk-hero-main { padding: 26px 26px 26px 30px; }
	#ppilot-tests-catalogue-root .ppmk-panel { padding: 22px 22px 22px 48px; gap: 14px; }
	#ppilot-tests-catalogue-root .ppmk-panel-text-title { font-size: 15px; }
	#ppilot-tests-catalogue-root .ppmk-hero.has-image::before { background: linear-gradient(90deg, rgba(247, 250, 255, 0.97) 0%, rgba(247, 250, 255, 0.9) 48%, rgba(247, 250, 255, 0.35) 70%, rgba(247, 250, 255, 0) 82%); }
	#ppilot-tests-catalogue-root .ppmk-grid--list .ppmk-card-media { flex-basis: 280px; }
	#ppilot-tests-catalogue-root .ppmk-grid--list .ppmk-card-foot { flex-direction: column; align-items: stretch; }
	#ppilot-tests-catalogue-root .ppmk-grid--list .ppmk-card-actions { flex: none; }
	#ppilot-tests-catalogue-root .ppmk-modal-hero { grid-template-columns: minmax(0, 1fr); }
	#ppilot-tests-catalogue-root .ppmk-modal-info { padding-right: 0; }
	#ppilot-tests-catalogue-root .ppmk-modal-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
	#ppilot-tests-catalogue-root.ppilot-tests-catalogue-app--marketplace { padding: 10px 0 40px; }
	#ppilot-tests-catalogue-root .ppmk-hero { border-radius: 18px; min-height: 0; }
	#ppilot-tests-catalogue-root .ppmk-hero-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	#ppilot-tests-catalogue-root .ppmk-hero-main { padding: 22px 18px 18px; }
	#ppilot-tests-catalogue-root .ppmk-hero.has-image .ppmk-hero-main { padding-top: 150px; }
	#ppilot-tests-catalogue-root .ppmk-hero.has-image::before { background: linear-gradient(180deg, rgba(247, 250, 255, 0) 0%, rgba(247, 250, 255, 0) 90px, rgba(247, 250, 255, 0.92) 190px, rgba(247, 250, 255, 0.98) 100%); }
	#ppilot-tests-catalogue-root .ppmk-hero-photo-img { object-position: center top; }
	#ppilot-tests-catalogue-root .ppmk-hero-sun { right: -80px; top: -120px; }
	#ppilot-tests-catalogue-root .ppmk-hero-ridges { left: 0; width: 100%; height: 42%; opacity: .7; }
	#ppilot-tests-catalogue-root .ppmk-hero-badge { font-size: 13.5px; min-height: 30px; padding: 0 14px; }
	#ppilot-tests-catalogue-root .ppmk-hero-badge-slot { min-height: 30px; margin-bottom: 10px; }
	#ppilot-tests-catalogue-root .ppmk-hero-title { font-size: 34px; }
	#ppilot-tests-catalogue-root .ppmk-hero-sub { font-size: 17px; margin-bottom: 16px; }
	#ppilot-tests-catalogue-root .ppmk-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	#ppilot-tests-catalogue-root .ppmk-benefit:nth-child(5) { display: none; }
	#ppilot-tests-catalogue-root .ppmk-benefit-icon { width: 38px; height: 38px; border-radius: 10px; }
	#ppilot-tests-catalogue-root .ppmk-benefit-icon .ppmk-icon { width: 20px; height: 20px; }
	#ppilot-tests-catalogue-root .ppmk-benefit-text { font-size: 13px; }
	#ppilot-tests-catalogue-root .ppmk-panel { clip-path: none; margin: 0 12px 12px; padding: 18px; border-radius: 14px; gap: 14px; }
	#ppilot-tests-catalogue-root .ppmk-panel-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	#ppilot-tests-catalogue-root .ppmk-panel-item { align-items: flex-start; gap: 10px; }
	#ppilot-tests-catalogue-root .ppmk-panel-icon { width: 32px; height: 32px; }
	#ppilot-tests-catalogue-root .ppmk-panel-text-title { font-size: 14px; }
	#ppilot-tests-catalogue-root .ppmk-panel-text-sub { font-size: 12px; }
	#ppilot-tests-catalogue-root .ppmk-panel-cta { min-height: 48px; font-size: 15px; }
	#ppilot-tests-catalogue-root .ppmk-chip,
	#ppilot-tests-catalogue-root .ppmk-chip:visited { min-height: 42px; padding: 0 16px; font-size: 14px; }
	#ppilot-tests-catalogue-root .ppmk-scroll-btn { display: none !important; }
	#ppilot-tests-catalogue-root .ppmk-filterbar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
	#ppilot-tests-catalogue-root .ppmk-filterbar-fields { display: contents; }
	#ppilot-tests-catalogue-root .ppmk-search { flex: none; min-width: 0; grid-column: 1 / -1; }
	#ppilot-tests-catalogue-root .ppmk-search-input { height: 46px; min-height: 46px; font-size: 16px; }
	#ppilot-tests-catalogue-root .ppmk-filterbar-selects { display: none; }
	#ppilot-tests-catalogue-root .ppmk-filters-btn { display: inline-flex; min-height: 44px; grid-column: 1; }
	#ppilot-tests-catalogue-root .ppmk-filters-btn[hidden] { display: none; }
	#ppilot-tests-catalogue-root .ppmk-filterbar-sort { grid-column: 2; min-width: 0; }
	#ppilot-tests-catalogue-root .ppmk-field--sort { flex: 1 1 auto; }
	#ppilot-tests-catalogue-root .ppmk-field--sort .ppmk-select { min-width: 0; max-width: none; width: 100%; height: 44px; min-height: 44px; }
	#ppilot-tests-catalogue-root .ppmk-viewtoggle { display: none; }
	#ppilot-tests-catalogue-root .ppmk-grid,
	#ppilot-tests-catalogue-root .ppmk-grid--list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	#ppilot-tests-catalogue-root .ppmk-grid--list .ppmk-card { flex-direction: column; }
	#ppilot-tests-catalogue-root .ppmk-grid--list .ppmk-card-media { flex: none; aspect-ratio: 2 / 1; min-height: 0; }
	#ppilot-tests-catalogue-root .ppmk-soon { min-height: 180px; }
	#ppilot-tests-catalogue-root .ppmk-modal-overlay { padding: 0; align-items: stretch; }
	#ppilot-tests-catalogue-root .ppmk-modal { max-width: none; max-height: none; min-height: 100%; border-radius: 0; }
	#ppilot-tests-catalogue-root .ppmk-modal-hero { padding: 16px; gap: 16px; }
	#ppilot-tests-catalogue-root .ppmk-modal-body { padding: 16px; gap: 14px; }
	#ppilot-tests-catalogue-root .ppmk-modal-actions .ppmk-btn { flex: 1 1 100%; }
}
@media (max-width: 400px) {
	#ppilot-tests-catalogue-root .ppmk-hero-title { font-size: 30px; }
	#ppilot-tests-catalogue-root .ppmk-panel-list { grid-template-columns: minmax(0, 1fr); }
	#ppilot-tests-catalogue-root .ppmk-card-title-main { font-size: 22px; }
	#ppilot-tests-catalogue-root .ppmk-featrow-label { font-size: 10px; }
	#ppilot-tests-catalogue-root .ppmk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 340px) {
	#ppilot-tests-catalogue-root .ppmk-benefits { grid-template-columns: minmax(0, 1fr); }
	#ppilot-tests-catalogue-root .ppmk-featrow { flex-wrap: wrap; row-gap: 8px; }
	#ppilot-tests-catalogue-root .ppmk-featrow-item { flex: 0 0 calc(33.333% - 3px); }
	#ppilot-tests-catalogue-root .ppmk-cardprice { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
	#ppilot-tests-catalogue-root .ppmk-card,
	#ppilot-tests-catalogue-root .ppmk-btn,
	#ppilot-tests-catalogue-root .ppmk-btn .ppmk-btn-arrow,
	#ppilot-tests-catalogue-root .ppmk-chip,
	#ppilot-tests-catalogue-root .ppmk-faq-caret { transition: none; }
	#ppilot-tests-catalogue-root .ppmk-card:hover { transform: none; }
	#ppilot-tests-catalogue-root .ppmk-btn:hover .ppmk-btn-arrow { transform: none; }
	#ppilot-tests-catalogue-root .ppmk-skel { animation: none; }
	#ppilot-tests-catalogue-root .ppmk-drawer { animation: none; }
}

/* =====================================================================
   v0.54.1 — PREMIUM EXAM LANDING (Level 2) + TEST LIST (Level 3)
   ---------------------------------------------------------------------
   Levels 2/3 render inside the SAME `.ppmk` scope as the marketplace
   (`<div class="ppmk ppx">`), so they share its --mk-* tokens, font
   stack, buttons, selects, skeletons and its ID-scoped THEME-ISOLATION
   LAYER (Tier 1, :where(.ppmk ...)). Every rule here is
   #ppilot-tests-catalogue-root + a `.ppx-*` class (Tier 2, 1,1,0+), so it
   beats both Tier 1 and `.entry-content X` theme rules without
   `!important`. No site header is drawn; content starts with the hero.
   No image is bundled: without an admin image the hero is a designed
   sky/ridge composition. Category accents are a 10-step soft palette
   chosen by sort POSITION (never by category name / slug).
   ===================================================================== */
#ppilot-tests-catalogue-root.ppilot-tests-catalogue-app--exam {
	background: linear-gradient(180deg, #eef4ff 0%, #f5f8fd 340px, #f6f8fc 100%);
	padding: 18px 0 64px;
}
#ppilot-tests-catalogue-root .ppx {
	--px-navy: #0b1f45;
	--px-ink: #0f172a;
	--px-body: #334155;
	--px-muted: #52617a;
	--px-line: #e3e9f3;
	--px-glass: rgba(255, 255, 255, 0.74);
	--px-glass-line: rgba(255, 255, 255, 0.85);
	--px-radius: 18px;
	--px-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 35, 80, 0.07);
	--px-shadow-hover: 0 2px 4px rgba(15, 23, 42, 0.05), 0 16px 34px rgba(15, 35, 80, 0.13);
	display: flex;
	flex-direction: column;
	gap: 22px;
}

/* ---------------- hero ---------------- */
#ppilot-tests-catalogue-root .ppx-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	min-height: 360px;
	border-radius: 24px;
	overflow: hidden;
	background: linear-gradient(115deg, #f7faff 0%, #edf4ff 46%, #dceaff 100%);
	border: 1px solid #d9e5f6;
	box-shadow: var(--px-shadow);
}
#ppilot-tests-catalogue-root .ppx-hero::after {
	content: ""; position: absolute; left: -80px; top: -120px; width: 380px; height: 380px; border-radius: 50%;
	background: radial-gradient(closest-side, rgba(96, 165, 250, 0.20), rgba(96, 165, 250, 0));
	pointer-events: none;
}
#ppilot-tests-catalogue-root .ppx-hero-main {
	position: relative; z-index: 2;
	display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
	padding: 24px 32px 104px;
	min-width: 0;
}
#ppilot-tests-catalogue-root .ppx-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; }
#ppilot-tests-catalogue-root .ppx-crumb,
#ppilot-tests-catalogue-root .ppx-crumb:visited {
	display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 12px 0 8px;
	border-radius: 999px; background: rgba(255, 255, 255, 0.78); border: 1px solid #dbe5f3;
	color: var(--px-navy); font-weight: 600; text-decoration: none;
}
#ppilot-tests-catalogue-root .ppx-crumb--plain { padding-left: 12px; }
#ppilot-tests-catalogue-root .ppx-crumb .ppmk-icon { width: 16px; height: 16px; }
#ppilot-tests-catalogue-root .ppx-crumb:hover { background: #ffffff; border-color: #bfd0ea; color: var(--px-navy); }
#ppilot-tests-catalogue-root .ppx-crumb-sep { color: #8a9ab3; }
#ppilot-tests-catalogue-root .ppx-hero-id { display: flex; align-items: center; gap: 20px; min-width: 0; }
#ppilot-tests-catalogue-root .ppx-avatar {
	flex: none; width: 116px; height: 116px; border-radius: 50%; overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, #1d4ed8 0%, #0b1f45 100%);
	border: 5px solid #ffffff; box-shadow: 0 10px 26px rgba(15, 45, 110, 0.20);
}
#ppilot-tests-catalogue-root .ppx-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
#ppilot-tests-catalogue-root .ppx-avatar-initials { color: #ffffff; font-size: 38px; font-weight: 800; letter-spacing: -0.02em; }
#ppilot-tests-catalogue-root .ppx-hero-titlecol { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
#ppilot-tests-catalogue-root .ppx-pill {
	display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px; border-radius: 999px;
	background: #ffffff; border: 1px solid #cfdcf0; color: #1e3a6e;
	font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
#ppilot-tests-catalogue-root .ppx-title {
	color: var(--px-navy); font-size: clamp(26px, 3.1vw, 42px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em;
	overflow-wrap: anywhere;
}
#ppilot-tests-catalogue-root .ppx-title-hi { color: #1e3a6e; font-size: 17px; font-weight: 700; line-height: 1.4; }
#ppilot-tests-catalogue-root .ppx-desc { color: var(--px-body); font-size: 15.5px; line-height: 1.6; max-width: 60ch; }
#ppilot-tests-catalogue-root .ppx-badges { display: flex; flex-wrap: wrap; gap: 8px; }
#ppilot-tests-catalogue-root .ppx-badge {
	display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px 0 7px;
	border-radius: 12px; font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
#ppilot-tests-catalogue-root .ppx-badge-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: #ffffff; }
#ppilot-tests-catalogue-root .ppx-badge-icon .ppmk-icon { width: 14px; height: 14px; }
#ppilot-tests-catalogue-root .ppx-badge--green { background: #e9f9ef; color: #14532d; border: 1px solid #c8eed6; }
#ppilot-tests-catalogue-root .ppx-badge--green .ppx-badge-icon { background: #16a34a; }
#ppilot-tests-catalogue-root .ppx-badge--blue { background: #eaf1ff; color: #1e3a8a; border: 1px solid #cddcfb; }
#ppilot-tests-catalogue-root .ppx-badge--blue .ppx-badge-icon { background: #2563eb; }
#ppilot-tests-catalogue-root .ppx-badge--amber { background: #fff6e5; color: #7c3d06; border: 1px solid #fbe2b4; }
#ppilot-tests-catalogue-root .ppx-badge--amber .ppx-badge-icon { background: #d97706; }
#ppilot-tests-catalogue-root .ppx-badge--rose { background: #fff0f2; color: #881337; border: 1px solid #fbd0d8; }
#ppilot-tests-catalogue-root .ppx-badge--rose .ppx-badge-icon { background: #e11d48; }
#ppilot-tests-catalogue-root .ppx-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
#ppilot-tests-catalogue-root .ppx-hero-actions .ppmk-btn { min-height: 46px; padding: 0 20px; border-radius: 12px; font-size: 15px; }
#ppilot-tests-catalogue-root .ppx-btn-start,
#ppilot-tests-catalogue-root .ppx-btn-start:visited { background: var(--px-navy); border-color: var(--px-navy); color: #ffffff; }
#ppilot-tests-catalogue-root .ppx-btn-start:hover { background: #163a7a; border-color: #163a7a; color: #ffffff; }
#ppilot-tests-catalogue-root .ppx-btn-ghost,
#ppilot-tests-catalogue-root .ppx-btn-ghost:visited { background: rgba(255, 255, 255, 0.85); border-color: #cfdcf0; color: var(--px-navy); }
#ppilot-tests-catalogue-root .ppx-btn-ghost:hover { background: #ffffff; border-color: #a9bfe3; color: var(--px-navy); }
#ppilot-tests-catalogue-root .ppx-price-note,
#ppilot-tests-catalogue-root .ppx-owned-note { display: inline-flex; align-items: center; gap: 8px; color: var(--px-muted); font-size: 13.5px; font-weight: 600; }
#ppilot-tests-catalogue-root .ppx-price-note del { color: #6b7a90; text-decoration: line-through; }
#ppilot-tests-catalogue-root .ppx-off { color: #047857; font-weight: 800; }
#ppilot-tests-catalogue-root .ppx-owned-note { color: #047857; }
#ppilot-tests-catalogue-root .ppx-owned-note .ppmk-icon { width: 16px; height: 16px; }

#ppilot-tests-catalogue-root .ppx-hero-visual { position: relative; min-height: 100%; overflow: hidden; }
#ppilot-tests-catalogue-root .ppx-hero-visual.has-image::before {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(90deg, #edf4ff 0%, rgba(237, 244, 255, 0.55) 16%, rgba(237, 244, 255, 0) 38%);
}
#ppilot-tests-catalogue-root .ppx-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
#ppilot-tests-catalogue-root .ppx-hero-art { position: absolute; inset: 0; background: linear-gradient(180deg, #cfe2ff 0%, #e6f0ff 55%, #f2f7ff 100%); }
#ppilot-tests-catalogue-root .ppx-hero-sun { position: absolute; right: 34%; top: 18%; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, #fff7e0 0%, #ffe4a8 55%, rgba(255, 228, 168, 0) 72%); }
#ppilot-tests-catalogue-root .ppx-hero-ridges { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 72%; display: block; }
#ppilot-tests-catalogue-root .ppx-hero-ridges .ppmk-ridge-far { fill: #9dbbec; opacity: .7; }
#ppilot-tests-catalogue-root .ppx-hero-ridges .ppmk-ridge-snow { fill: #ffffff; opacity: .95; }
#ppilot-tests-catalogue-root .ppx-hero-ridges .ppmk-ridge-near { fill: #6f95d6; opacity: .5; }
#ppilot-tests-catalogue-root .ppx-benefits {
	position: absolute; z-index: 2; right: 20px; top: 20px; width: min(300px, calc(100% - 40px));
	padding: 18px 20px; border-radius: 18px;
	background: var(--px-glass); border: 1px solid var(--px-glass-line);
	box-shadow: 0 12px 30px rgba(15, 35, 80, 0.14);
	-webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
}
#ppilot-tests-catalogue-root .ppx-benefits-title { color: var(--px-navy); font-size: 16px; font-weight: 800; margin: 0 0 10px; }
#ppilot-tests-catalogue-root .ppx-benefits-list { display: flex; flex-direction: column; gap: 9px; }
#ppilot-tests-catalogue-root .ppx-benefits-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--px-ink); font-size: 14px; font-weight: 600; line-height: 1.35; }
#ppilot-tests-catalogue-root .ppx-tick { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #16a34a; color: #ffffff; }
#ppilot-tests-catalogue-root .ppx-tick .ppmk-icon { width: 13px; height: 13px; stroke-width: 2.6; }

#ppilot-tests-catalogue-root .ppx-statbar {
	position: absolute; z-index: 3; left: 32px; bottom: 20px; margin: 0;
	display: flex; align-items: stretch;
	border-radius: 16px; background: rgba(255, 255, 255, 0.86); border: 1px solid var(--px-glass-line);
	box-shadow: 0 12px 28px rgba(15, 35, 80, 0.13);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	max-width: calc(100% - 64px);
}
#ppilot-tests-catalogue-root .ppx-stat {
	display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
	padding: 12px 20px; min-width: 0;
}
#ppilot-tests-catalogue-root .ppx-stat + .ppx-stat { border-left: 1px solid #e2e9f4; }
#ppilot-tests-catalogue-root .ppx-stat-icon { grid-row: 1 / 3; color: #2563eb; display: inline-flex; }
#ppilot-tests-catalogue-root .ppx-stat-icon .ppmk-icon { width: 22px; height: 22px; }
#ppilot-tests-catalogue-root .ppx-stat-value { margin: 0; color: var(--px-navy); font-size: 18px; font-weight: 800; line-height: 1.15; white-space: nowrap; }
#ppilot-tests-catalogue-root .ppx-stat-label { margin: 0; color: var(--px-muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; }

#ppilot-tests-catalogue-root .ppx-hero--compact { min-height: 0; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
#ppilot-tests-catalogue-root .ppx-hero--compact .ppx-hero-main { padding-bottom: 26px; }
#ppilot-tests-catalogue-root .ppx-hero--message { grid-template-columns: minmax(0, 1fr); min-height: 0; }
#ppilot-tests-catalogue-root .ppx-hero--message .ppx-hero-main { padding-bottom: 28px; }

/* ---------------- sections ---------------- */
#ppilot-tests-catalogue-root .ppx-section {
	padding: 22px 24px 24px; border-radius: 22px; background: #ffffff; border: 1px solid var(--px-line); box-shadow: var(--px-shadow);
}
#ppilot-tests-catalogue-root .ppx-sec-head,
#ppilot-tests-catalogue-root .ppx-panel-head { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; min-width: 0; }
#ppilot-tests-catalogue-root .ppx-sec-icon {
	flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px;
	background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); color: #ffffff; box-shadow: 0 6px 14px rgba(37, 99, 235, 0.28);
}
#ppilot-tests-catalogue-root .ppx-sec-icon .ppmk-icon { width: 22px; height: 22px; }
#ppilot-tests-catalogue-root .ppx-sec-icon--warm { background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%); box-shadow: 0 6px 14px rgba(225, 29, 72, 0.25); }
#ppilot-tests-catalogue-root .ppx-sec-icon--green { background: linear-gradient(135deg, #34d399 0%, #059669 100%); box-shadow: 0 6px 14px rgba(5, 150, 105, 0.25); }
#ppilot-tests-catalogue-root .ppx-sec-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
#ppilot-tests-catalogue-root .ppx-sec-title { color: var(--px-navy); font-size: 21px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
#ppilot-tests-catalogue-root .ppx-sec-sub { color: var(--px-muted); font-size: 14px; line-height: 1.45; }
#ppilot-tests-catalogue-root .ppx-sec-right { flex: none; color: var(--px-navy); font-size: 14px; font-weight: 700; }

/* ---------------- category grid ---------------- */
#ppilot-tests-catalogue-root .ppx-cat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
#ppilot-tests-catalogue-root .ppx-cat,
#ppilot-tests-catalogue-root .ppx-cat:visited {
	--tone: #2563eb; --tone-soft: #eef4ff; --tone-line: #d6e3fb; --tone-ink: #1e3a8a;
	position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
	min-height: 150px; padding: 16px; border-radius: var(--px-radius);
	background: linear-gradient(160deg, var(--tone-soft) 0%, #ffffff 78%);
	border: 1px solid var(--tone-line); color: var(--px-ink); text-decoration: none;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#ppilot-tests-catalogue-root a.ppx-cat:hover { transform: translateY(-3px); box-shadow: var(--px-shadow-hover); border-color: var(--tone); color: var(--px-ink); }
#ppilot-tests-catalogue-root a.ppx-cat:focus-visible { outline: none; box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px var(--tone); }
#ppilot-tests-catalogue-root .ppx-cat-head { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 6px; align-items: center; }
#ppilot-tests-catalogue-root .ppx-cat-icon {
	grid-row: 1 / 3; flex: none; display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; border-radius: 14px; overflow: hidden;
	background: #ffffff; color: var(--tone); border: 1px solid var(--tone-line); box-shadow: 0 4px 10px rgba(15, 35, 80, 0.06);
}
#ppilot-tests-catalogue-root .ppx-cat-icon .ppmk-icon { width: 26px; height: 26px; }
#ppilot-tests-catalogue-root .ppx-cat-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
#ppilot-tests-catalogue-root .ppx-cat-name { color: var(--px-navy); font-size: 15.5px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
#ppilot-tests-catalogue-root .ppx-cat-count {
	justify-self: start; display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px;
	background: #ffffff; border: 1px solid var(--tone-line); color: var(--tone-ink); font-size: 12px; font-weight: 800; white-space: nowrap;
}
#ppilot-tests-catalogue-root .ppx-cat-count--zero { color: #52617a; border-color: #dde4ee; background: #f6f8fb; }
#ppilot-tests-catalogue-root .ppx-cat-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
#ppilot-tests-catalogue-root .ppx-cat-desc {
	color: var(--px-body); font-size: 13.5px; line-height: 1.5; min-width: 0;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#ppilot-tests-catalogue-root .ppx-cat-go {
	flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
	background: #ffffff; color: var(--tone); border: 1px solid var(--tone-line); transition: background .18s ease, color .18s ease;
}
#ppilot-tests-catalogue-root a.ppx-cat:hover .ppx-cat-go,
#ppilot-tests-catalogue-root a.ppx-uncat:hover .ppx-cat-go { background: var(--tone); color: #ffffff; }
#ppilot-tests-catalogue-root .ppx-cat-go .ppmk-icon { width: 17px; height: 17px; }
#ppilot-tests-catalogue-root .ppx-cat--empty { background: #fafbfd; border-style: dashed; border-color: #d8e0ec; box-shadow: none; }
#ppilot-tests-catalogue-root .ppx-cat--empty .ppx-cat-icon { color: #8193ad; border-color: #e1e7f0; box-shadow: none; filter: grayscale(0.6); }
#ppilot-tests-catalogue-root .ppx-cat--empty .ppx-cat-name { color: #3b4a63; }
#ppilot-tests-catalogue-root .ppx-cat--empty .ppx-cat-desc { color: #5b6b82; }
#ppilot-tests-catalogue-root .ppx-tone-1 { --tone: #2563eb; --tone-soft: #eaf2ff; --tone-line: #d3e1fb; --tone-ink: #1e3a8a; }
#ppilot-tests-catalogue-root .ppx-tone-2 { --tone: #e11d48; --tone-soft: #fff0f3; --tone-line: #fbd3dc; --tone-ink: #9f1239; }
#ppilot-tests-catalogue-root .ppx-tone-3 { --tone: #059669; --tone-soft: #eafaf3; --tone-line: #c9eedd; --tone-ink: #065f46; }
#ppilot-tests-catalogue-root .ppx-tone-4 { --tone: #7c3aed; --tone-soft: #f4efff; --tone-line: #e0d4fb; --tone-ink: #5b21b6; }
#ppilot-tests-catalogue-root .ppx-tone-5 { --tone: #d97706; --tone-soft: #fff7e8; --tone-line: #f8e1b6; --tone-ink: #92400e; }
#ppilot-tests-catalogue-root .ppx-tone-6 { --tone: #db2777; --tone-soft: #fff0f7; --tone-line: #f9d1e4; --tone-ink: #9d174d; }
#ppilot-tests-catalogue-root .ppx-tone-7 { --tone: #0284c7; --tone-soft: #ebf7ff; --tone-line: #cbe7f8; --tone-ink: #075985; }
#ppilot-tests-catalogue-root .ppx-tone-8 { --tone: #0d9488; --tone-soft: #e9faf7; --tone-line: #c6ece6; --tone-ink: #115e59; }
#ppilot-tests-catalogue-root .ppx-tone-9 { --tone: #9333ea; --tone-soft: #f7efff; --tone-line: #e6d3fb; --tone-ink: #6b21a8; }
#ppilot-tests-catalogue-root .ppx-tone-10 { --tone: #ea580c; --tone-soft: #fff3eb; --tone-line: #fbd9c4; --tone-ink: #9a3412; }
#ppilot-tests-catalogue-root .ppx-uncat,
#ppilot-tests-catalogue-root .ppx-uncat:visited {
	--tone: #475569; --tone-line: #dbe2ec;
	display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 12px 16px; border-radius: 14px;
	background: #f8fafc; border: 1px dashed #cdd6e3; color: var(--px-ink); text-decoration: none;
}
#ppilot-tests-catalogue-root .ppx-uncat:hover { border-color: #94a3b8; color: var(--px-ink); }
#ppilot-tests-catalogue-root .ppx-uncat:focus-visible { outline: none; box-shadow: var(--mk-focus); }
#ppilot-tests-catalogue-root .ppx-uncat .ppx-cat-icon { width: 40px; height: 40px; }
#ppilot-tests-catalogue-root .ppx-uncat-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }

/* ---------------- recent tests + journey ---------------- */
#ppilot-tests-catalogue-root .ppx-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; }
#ppilot-tests-catalogue-root .ppx-panel { padding: 20px 22px; border-radius: 22px; background: #ffffff; border: 1px solid var(--px-line); box-shadow: var(--px-shadow); min-width: 0; }
#ppilot-tests-catalogue-root .ppx-panel--journey { background: linear-gradient(160deg, #effaf4 0%, #ffffff 70%); border-color: #d6efe1; }
#ppilot-tests-catalogue-root .ppx-btn-outline,
#ppilot-tests-catalogue-root .ppx-btn-outline:visited { flex: none; min-height: 38px; padding: 0 14px; border-radius: 10px; background: #ffffff; border-color: #cfd9e8; color: var(--px-navy); font-size: 13.5px; }
#ppilot-tests-catalogue-root .ppx-btn-outline:hover { background: #f3f7fd; border-color: #9fb6da; color: var(--px-navy); }
#ppilot-tests-catalogue-root .ppx-btn-outline[disabled] { opacity: .45; cursor: not-allowed; }
#ppilot-tests-catalogue-root .ppx-recent { display: flex; flex-direction: column; gap: 10px; }
#ppilot-tests-catalogue-root .ppx-recent-row {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px;
	padding: 12px 14px; border-radius: 14px; border: 1px solid var(--px-line); background: #fbfcfe;
}
#ppilot-tests-catalogue-root .ppx-recent-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: #eaf2ff; color: #2563eb; }
#ppilot-tests-catalogue-root .ppx-recent-icon .ppmk-icon { width: 24px; height: 24px; }
#ppilot-tests-catalogue-root .ppx-recent-flag { position: absolute; left: -6px; top: -8px; padding: 1px 6px; border-radius: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; color: #ffffff; }
#ppilot-tests-catalogue-root .ppx-recent-flag--free { background: #16a34a; }
#ppilot-tests-catalogue-root .ppx-recent-flag--premium { background: #b45309; }
#ppilot-tests-catalogue-root .ppx-recent-flag--locked { background: #1f2937; } /* v0.54.2 */
#ppilot-tests-catalogue-root .ppx-recent-price--locked { color: #52617a; } /* v0.54.2 */
#ppilot-tests-catalogue-root .ppx-recent-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#ppilot-tests-catalogue-root .ppx-recent-title { color: var(--px-navy); font-size: 15.5px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
#ppilot-tests-catalogue-root .ppx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--px-muted); font-size: 13px; font-weight: 500; }
#ppilot-tests-catalogue-root .ppx-dot { color: #a3b1c6; }
#ppilot-tests-catalogue-root .ppx-recent-price { padding: 4px 10px; border-radius: 8px; background: #e9f9ef; color: #166534; font-size: 13px; font-weight: 800; white-space: nowrap; }
#ppilot-tests-catalogue-root .ppx-recent-price--premium { background: #fff6e5; color: #7c3d06; }
#ppilot-tests-catalogue-root .ppx-cta,
#ppilot-tests-catalogue-root .ppx-cta:visited { min-height: 42px; padding: 0 16px; border-radius: 11px; white-space: nowrap; }
#ppilot-tests-catalogue-root .ppx-recent .ppmk-btn--primary,
#ppilot-tests-catalogue-root .ppx-recent .ppmk-btn--primary:visited,
#ppilot-tests-catalogue-root .ppx-tcard .ppmk-btn--primary,
#ppilot-tests-catalogue-root .ppx-tcard .ppmk-btn--primary:visited { background: var(--px-navy); border-color: var(--px-navy); color: #ffffff; }
#ppilot-tests-catalogue-root .ppx-recent .ppmk-btn--primary:hover,
#ppilot-tests-catalogue-root .ppx-tcard .ppmk-btn--primary:hover { background: #163a7a; border-color: #163a7a; color: #ffffff; }
#ppilot-tests-catalogue-root .ppx-cta--muted,
#ppilot-tests-catalogue-root .ppx-cta--muted:hover { background: #eef2f7; border-color: #eef2f7; color: #52617a; cursor: not-allowed; }
#ppilot-tests-catalogue-root .ppx-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#ppilot-tests-catalogue-root .ppx-tile { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: #ffffff; border: 1px solid #e3ebf4; min-width: 0; }
#ppilot-tests-catalogue-root .ppx-tile-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; }
#ppilot-tests-catalogue-root .ppx-tile-icon .ppmk-icon { width: 22px; height: 22px; }
#ppilot-tests-catalogue-root .ppx-tile--violet .ppx-tile-icon { background: #f1eaff; color: #7c3aed; }
#ppilot-tests-catalogue-root .ppx-tile--orange .ppx-tile-icon { background: #fff0e6; color: #ea580c; }
#ppilot-tests-catalogue-root .ppx-tile--blue .ppx-tile-icon { background: #e8f0ff; color: #2563eb; }
#ppilot-tests-catalogue-root .ppx-tile--green .ppx-tile-icon { background: #e6f8ee; color: #059669; }
#ppilot-tests-catalogue-root .ppx-tile-text { display: flex; flex-direction: column; min-width: 0; }
#ppilot-tests-catalogue-root .ppx-tile-value { color: var(--px-navy); font-size: 22px; font-weight: 800; line-height: 1.15; }
#ppilot-tests-catalogue-root .ppx-tile-label { color: var(--px-muted); font-size: 13px; font-weight: 600; }

/* ---------------- capability strip ---------------- */
#ppilot-tests-catalogue-root .ppx-caps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
#ppilot-tests-catalogue-root .ppx-cap-link,
#ppilot-tests-catalogue-root .ppx-cap-link:visited {
	--tone: #2563eb; --tone-soft: #eef4ff; --tone-line: #d6e3fb;
	display: flex; align-items: center; gap: 14px; height: 100%; padding: 16px 18px; border-radius: 16px;
	background: linear-gradient(160deg, var(--tone-soft) 0%, #ffffff 85%); border: 1px solid var(--tone-line);
	color: var(--px-ink); text-decoration: none;
}
#ppilot-tests-catalogue-root a.ppx-cap-link:hover { border-color: var(--tone); color: var(--px-ink); }
#ppilot-tests-catalogue-root a.ppx-cap-link:focus-visible { outline: none; box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px var(--tone); }
#ppilot-tests-catalogue-root .ppx-cap--violet .ppx-cap-link { --tone: #7c3aed; --tone-soft: #f4efff; --tone-line: #e2d7fb; }
#ppilot-tests-catalogue-root .ppx-cap--rose .ppx-cap-link { --tone: #e11d48; --tone-soft: #fff1f4; --tone-line: #fad3dc; }
#ppilot-tests-catalogue-root .ppx-cap--amber .ppx-cap-link { --tone: #d97706; --tone-soft: #fff8ea; --tone-line: #f7e2b8; }
#ppilot-tests-catalogue-root .ppx-cap--blue .ppx-cap-link { --tone: #2563eb; --tone-soft: #edf3ff; --tone-line: #d3e1fb; }
#ppilot-tests-catalogue-root .ppx-cap-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 14px; background: var(--tone); color: #ffffff; }
#ppilot-tests-catalogue-root .ppx-cap-icon .ppmk-icon { width: 24px; height: 24px; }
#ppilot-tests-catalogue-root .ppx-cap-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#ppilot-tests-catalogue-root .ppx-cap-title { color: var(--px-navy); font-size: 15px; font-weight: 800; line-height: 1.3; }
#ppilot-tests-catalogue-root .ppx-cap-sub { color: var(--px-body); font-size: 13px; line-height: 1.45; }

/* ---------------- Level 3 ---------------- */
#ppilot-tests-catalogue-root .ppx-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; }
#ppilot-tests-catalogue-root .ppx-toolbar .ppx-search { flex: 1 1 260px; max-width: 420px; }
#ppilot-tests-catalogue-root .ppx-toolbar .ppx-field { flex: 0 0 auto; }
#ppilot-tests-catalogue-root .ppx-toolbar .ppx-field .ppmk-select { min-width: 160px; }
#ppilot-tests-catalogue-root .ppx-test-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
#ppilot-tests-catalogue-root .ppx-tcard {
	display: flex; flex-direction: column; min-width: 0; border-radius: var(--px-radius); overflow: hidden;
	background: #ffffff; border: 1px solid var(--px-line); box-shadow: var(--px-shadow);
	transition: transform .18s ease, box-shadow .18s ease;
}
#ppilot-tests-catalogue-root .ppx-tcard:hover { transform: translateY(-2px); box-shadow: var(--px-shadow-hover); }
#ppilot-tests-catalogue-root .ppx-tcard-media { position: relative; aspect-ratio: 16 / 7; overflow: hidden; }
#ppilot-tests-catalogue-root .ppx-tcard-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
#ppilot-tests-catalogue-root .ppx-tcard-art { position: absolute; inset: 0; }
#ppilot-tests-catalogue-root .ppx-tcard-art-icon { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 16px; background: rgba(255, 255, 255, 0.16); color: #ffffff; }
#ppilot-tests-catalogue-root .ppx-tcard-art-icon .ppmk-icon { width: 28px; height: 28px; }
#ppilot-tests-catalogue-root .ppx-tcard-flags { position: absolute; left: 12px; top: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
#ppilot-tests-catalogue-root .ppx-flag { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 800; background: #ffffff; color: var(--px-navy); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); }
#ppilot-tests-catalogue-root .ppx-flag .ppmk-icon { width: 13px; height: 13px; }
#ppilot-tests-catalogue-root .ppx-flag--free { background: #16a34a; color: #ffffff; }
#ppilot-tests-catalogue-root .ppx-flag--premium { background: #fde68a; color: #5b3a02; }
/* v0.54.2 §free-sample-policy: Locked badge (Tier 2, scoped; no important flags) */
#ppilot-tests-catalogue-root .ppx-flag--locked { background: #1f2937; color: #ffffff; }
#ppilot-tests-catalogue-root .ppx-flag--locked .ppmk-icon { color: #fcd34d; }
#ppilot-tests-catalogue-root .ppx-flag--progress { background: #dbeafe; color: #1e3a8a; }
#ppilot-tests-catalogue-root .ppx-flag--done { background: #dcfce7; color: #14532d; }
#ppilot-tests-catalogue-root .ppx-tcard-body { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; padding: 16px 18px 18px; }
#ppilot-tests-catalogue-root .ppx-tcard-eyebrow { color: #2a4a8a; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
#ppilot-tests-catalogue-root .ppx-tcard-title { color: var(--px-navy); font-size: 17px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
#ppilot-tests-catalogue-root .ppx-tcard-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; }
#ppilot-tests-catalogue-root .ppx-tcard-facts li { display: inline-flex; align-items: center; gap: 6px; color: var(--px-body); font-size: 13.5px; font-weight: 600; }
#ppilot-tests-catalogue-root .ppx-tcard-facts .ppmk-icon { width: 16px; height: 16px; color: #4a6491; }
#ppilot-tests-catalogue-root .ppx-tcard-tags { display: flex; flex-wrap: wrap; gap: 6px; }
#ppilot-tests-catalogue-root .ppx-tag { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 0 10px; border-radius: 8px; background: #f1f5fb; color: #23395f; font-size: 12.5px; font-weight: 700; max-width: 100%; }
#ppilot-tests-catalogue-root .ppx-tag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ppilot-tests-catalogue-root .ppx-tag .ppmk-icon { width: 14px; height: 14px; }
#ppilot-tests-catalogue-root .ppx-tag--easy { background: #e8f8ee; color: #14532d; }
#ppilot-tests-catalogue-root .ppx-tag--medium { background: #fff4e0; color: #7c3d06; }
#ppilot-tests-catalogue-root .ppx-tag--hard { background: #ffecee; color: #9f1239; }
#ppilot-tests-catalogue-root .ppx-tcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid #edf1f7; }
#ppilot-tests-catalogue-root .ppx-tcard-price { display: flex; flex-direction: column; min-width: 0; }
#ppilot-tests-catalogue-root .ppx-price-row { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
#ppilot-tests-catalogue-root .ppx-price { color: var(--px-navy); font-size: 19px; font-weight: 800; line-height: 1.2; }
#ppilot-tests-catalogue-root .ppx-price--free { color: #15803d; }
#ppilot-tests-catalogue-root .ppx-price--owned { color: #047857; font-size: 16px; }
#ppilot-tests-catalogue-root .ppx-price--muted { color: #52617a; font-size: 16px; }
#ppilot-tests-catalogue-root .ppx-price--locked { display: inline-flex; align-items: center; gap: 5px; } /* v0.54.2 */
#ppilot-tests-catalogue-root .ppx-price--locked .ppmk-icon { width: 15px; height: 15px; }
#ppilot-tests-catalogue-root .ppx-price-sub { color: var(--px-muted); font-size: 12.5px; font-weight: 600; }
#ppilot-tests-catalogue-root .ppx-tcard .ppmk-price-original { color: #6b7a90; font-size: 13px; text-decoration: line-through; }
#ppilot-tests-catalogue-root .ppx-tcard .ppmk-price-off { color: #047857; font-size: 12px; font-weight: 800; }
#ppilot-tests-catalogue-root .ppx-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; }
#ppilot-tests-catalogue-root .ppx-page-status { color: var(--px-muted); font-size: 13.5px; font-weight: 600; }
#ppilot-tests-catalogue-root .ppx-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 16px; text-align: center; border-radius: 16px; background: #f8fafd; border: 1px dashed #d4ddea; }
#ppilot-tests-catalogue-root .ppx-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 16px; background: #eaf2ff; color: #2563eb; }
#ppilot-tests-catalogue-root .ppx-empty-title { color: var(--px-navy); font-size: 18px; font-weight: 800; }
#ppilot-tests-catalogue-root .ppx-empty-text,
#ppilot-tests-catalogue-root .ppx-empty-note { color: var(--px-muted); font-size: 14px; line-height: 1.5; }
#ppilot-tests-catalogue-root .ppx .ppilot-tests-error-state { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
#ppilot-tests-catalogue-root .ppx .ppilot-tests-error-state .ppilot-notice { margin: 0; color: var(--px-ink); font-size: 15px; }
#ppilot-tests-catalogue-root .ppx .ppilot-tests-error-state .ppilot-btn,
#ppilot-tests-catalogue-root .ppx .ppilot-tests-error-state .ppilot-btn:visited { min-height: 42px; padding: 0 18px; border-radius: 10px; border: 0; background: var(--px-navy); color: #ffffff; font-weight: 700; font-size: 14px; cursor: pointer; }
#ppilot-tests-catalogue-root .ppx-skeleton { display: flex; flex-direction: column; gap: 16px; }
#ppilot-tests-catalogue-root .ppx-skel-hero { height: 320px; border-radius: 24px; }
#ppilot-tests-catalogue-root .ppx-skel-row { height: 120px; border-radius: 18px; }
#ppilot-tests-catalogue-root .ppx-skeleton--tests .ppx-skel-hero { height: 180px; }

/* ---------------- View Details: harmonized with the landing ---------------- */
#ppilot-tests-catalogue-root .ppmk-modal-hero { background: linear-gradient(115deg, #f7faff 0%, #edf4ff 55%, #e2edff 100%); border-bottom: 1px solid #dde7f6; }
#ppilot-tests-catalogue-root .ppmk-modal-body .ppmk-dsec { border-radius: 18px; border-color: #e3e9f3; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 35, 80, 0.05); }
#ppilot-tests-catalogue-root .ppmk-modal-body .ppmk-dsec-icon { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); color: #ffffff; }
#ppilot-tests-catalogue-root .ppmk-modal-eyebrow { color: #1e3a8a; }

/* ---------------- focus / responsive / motion ---------------- */
#ppilot-tests-catalogue-root .ppx a:focus-visible,
#ppilot-tests-catalogue-root .ppx button:focus-visible { outline: none; box-shadow: var(--mk-focus); }
@media (max-width: 1279px) {
	#ppilot-tests-catalogue-root .ppx-cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	#ppilot-tests-catalogue-root .ppx-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1099px) {
	#ppilot-tests-catalogue-root .ppx-hero { grid-template-columns: minmax(0, 1fr); }
	#ppilot-tests-catalogue-root .ppx-hero-main { padding: 22px 24px 20px; }
	#ppilot-tests-catalogue-root .ppx-hero-visual { min-height: 240px; }
	#ppilot-tests-catalogue-root .ppx-hero-visual.has-image::before { background: linear-gradient(180deg, #edf4ff 0%, rgba(237, 244, 255, 0) 30%); }
	#ppilot-tests-catalogue-root .ppx-statbar { position: relative; left: auto; bottom: auto; grid-row: 2; margin: 0 24px 20px; max-width: none; flex-wrap: wrap; }
	#ppilot-tests-catalogue-root .ppx-hero .ppx-hero-visual { grid-row: 3; }
	#ppilot-tests-catalogue-root .ppx-hero--compact .ppx-hero-visual { display: none; }
	#ppilot-tests-catalogue-root .ppx-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	#ppilot-tests-catalogue-root .ppx-split { grid-template-columns: minmax(0, 1fr); }
	#ppilot-tests-catalogue-root .ppx-test-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	#ppilot-tests-catalogue-root.ppilot-tests-catalogue-app--exam { padding: 12px 0 40px; }
	#ppilot-tests-catalogue-root .ppx { gap: 16px; }
	#ppilot-tests-catalogue-root .ppx-hero { border-radius: 20px; }
	#ppilot-tests-catalogue-root .ppx-hero-main { padding: 18px 16px 16px; gap: 14px; }
	#ppilot-tests-catalogue-root .ppx-hero-id { gap: 14px; align-items: flex-start; }
	#ppilot-tests-catalogue-root .ppx-avatar { width: 72px; height: 72px; border-width: 3px; }
	#ppilot-tests-catalogue-root .ppx-avatar-initials { font-size: 24px; }
	#ppilot-tests-catalogue-root .ppx-desc { font-size: 14.5px; }
	#ppilot-tests-catalogue-root .ppx-badge { min-height: 32px; font-size: 12.5px; padding-right: 10px; }
	#ppilot-tests-catalogue-root .ppx-hero-actions .ppmk-btn { flex: 1 1 auto; }
	#ppilot-tests-catalogue-root .ppx-statbar { margin: 0 16px 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#ppilot-tests-catalogue-root .ppx-stat { padding: 10px 12px; }
	#ppilot-tests-catalogue-root .ppx-stat + .ppx-stat { border-left: 0; }
	#ppilot-tests-catalogue-root .ppx-stat:nth-child(even) { border-left: 1px solid #e2e9f4; }
	#ppilot-tests-catalogue-root .ppx-stat:nth-child(n+3) { border-top: 1px solid #e2e9f4; }
	#ppilot-tests-catalogue-root .ppx-stat-value { font-size: 16px; white-space: normal; }
	#ppilot-tests-catalogue-root .ppx-stat-label { white-space: normal; }
	#ppilot-tests-catalogue-root .ppx-hero-visual { min-height: 0; }
	#ppilot-tests-catalogue-root .ppx-hero-visual .ppx-hero-img,
	#ppilot-tests-catalogue-root .ppx-hero-visual .ppx-hero-art { position: relative; display: block; height: 180px; }
	#ppilot-tests-catalogue-root .ppx-hero-visual.has-image::before { display: none; }
	#ppilot-tests-catalogue-root .ppx-benefits { position: relative; right: auto; top: auto; width: auto; margin: -36px 16px 16px; }
	#ppilot-tests-catalogue-root .ppx-section,
	#ppilot-tests-catalogue-root .ppx-panel { padding: 16px; border-radius: 18px; }
	#ppilot-tests-catalogue-root .ppx-sec-head { flex-wrap: wrap; }
	#ppilot-tests-catalogue-root .ppx-sec-right { width: 100%; font-size: 13px; color: var(--px-muted); }
	#ppilot-tests-catalogue-root .ppx-sec-icon { width: 40px; height: 40px; border-radius: 12px; }
	#ppilot-tests-catalogue-root .ppx-sec-title { font-size: 18px; }
	#ppilot-tests-catalogue-root .ppx-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	#ppilot-tests-catalogue-root .ppx-cat,
	#ppilot-tests-catalogue-root .ppx-cat:visited { min-height: 0; padding: 12px; gap: 10px; border-radius: 14px; }
	#ppilot-tests-catalogue-root .ppx-cat-head { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
	#ppilot-tests-catalogue-root .ppx-cat-icon { grid-row: auto; width: 42px; height: 42px; border-radius: 12px; }
	#ppilot-tests-catalogue-root .ppx-cat-name { font-size: 14px; }
	#ppilot-tests-catalogue-root .ppx-cat-desc { font-size: 12.5px; }
	#ppilot-tests-catalogue-root .ppx-cat-go { width: 30px; height: 30px; }
	#ppilot-tests-catalogue-root .ppx-panel-head { flex-wrap: wrap; }
	#ppilot-tests-catalogue-root .ppx-panel-head .ppx-btn-outline { width: 100%; }
	#ppilot-tests-catalogue-root .ppx-recent-row { grid-template-columns: auto minmax(0, 1fr); }
	#ppilot-tests-catalogue-root .ppx-recent-price { grid-column: 1; justify-self: start; }
	#ppilot-tests-catalogue-root .ppx-recent-row .ppx-cta { grid-column: 2; justify-self: end; }
	#ppilot-tests-catalogue-root .ppx-recent-icon { width: 44px; height: 44px; }
	#ppilot-tests-catalogue-root .ppx-tile { padding: 10px; gap: 10px; }
	#ppilot-tests-catalogue-root .ppx-tile-icon { width: 38px; height: 38px; }
	#ppilot-tests-catalogue-root .ppx-tile-value { font-size: 18px; }
	#ppilot-tests-catalogue-root .ppx-caps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	#ppilot-tests-catalogue-root .ppx-test-grid { grid-template-columns: minmax(0, 1fr); }
	#ppilot-tests-catalogue-root .ppx-toolbar .ppx-search { flex: 1 1 100%; max-width: none; min-width: 0; }
	#ppilot-tests-catalogue-root .ppx-toolbar .ppx-field { flex: 1 1 0; }
	#ppilot-tests-catalogue-root .ppx-toolbar .ppx-field .ppmk-select { min-width: 0; width: 100%; }
}
@media (max-width: 379px) {
	#ppilot-tests-catalogue-root .ppx-cat-grid { grid-template-columns: minmax(0, 1fr); }
	#ppilot-tests-catalogue-root .ppx-tiles { grid-template-columns: minmax(0, 1fr); }
	#ppilot-tests-catalogue-root .ppx-hero-id { flex-direction: column; }
	#ppilot-tests-catalogue-root .ppx-tcard-foot { flex-wrap: wrap; }
	#ppilot-tests-catalogue-root .ppx-tcard-foot .ppx-cta { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
	#ppilot-tests-catalogue-root .ppx-cat,
	#ppilot-tests-catalogue-root .ppx-cat-go,
	#ppilot-tests-catalogue-root .ppx-tcard { transition: none; }
	#ppilot-tests-catalogue-root a.ppx-cat:hover,
	#ppilot-tests-catalogue-root .ppx-tcard:hover { transform: none; }
}

/* =====================================================================
   v0.55.0 — "Why Choose PracticePilot" panel (exam landing). Tier 2:
   #ppilot-tests-catalogue-root-scoped, every text element has an explicit
   colour, no important flags. Recent | Journey | Why on wide screens.
   ===================================================================== */
#ppilot-tests-catalogue-root .ppx-split--3 { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.9fr); }
#ppilot-tests-catalogue-root .ppx-btn-outline,
#ppilot-tests-catalogue-root .ppx-btn-outline:visited { min-height: 40px; } /* v0.55.0: touch target (was 38px) */
#ppilot-tests-catalogue-root .ppx-panel--why { background: linear-gradient(160deg, #f4f1ff 0%, #ffffff 72%); border-color: #e2dbfb; display: flex; flex-direction: column; gap: 14px; }
#ppilot-tests-catalogue-root .ppx-sec-icon--violet { background: #ede7ff; color: #6d28d9; }
#ppilot-tests-catalogue-root .ppx-panel--why .ppx-caps { grid-template-columns: minmax(0, 1fr); gap: 8px; }
#ppilot-tests-catalogue-root .ppx-panel--why .ppx-cap-link,
#ppilot-tests-catalogue-root .ppx-panel--why .ppx-cap-link:visited { padding: 10px 12px; gap: 10px; border-radius: 12px; color: var(--px-ink); }
#ppilot-tests-catalogue-root .ppx-panel--why .ppx-cap-icon { width: 36px; height: 36px; border-radius: 10px; }
#ppilot-tests-catalogue-root .ppx-panel--why .ppx-cap-icon .ppmk-icon { width: 18px; height: 18px; }
#ppilot-tests-catalogue-root .ppx-why-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#ppilot-tests-catalogue-root .ppx-why-checks li { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 0; color: var(--px-ink); font-size: 14px; line-height: 1.45; }
#ppilot-tests-catalogue-root .ppx-why-check-text { color: var(--px-ink); overflow-wrap: anywhere; }
#ppilot-tests-catalogue-root .ppx-why-checks .ppx-tick { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; background: #16a34a; color: #ffffff; }
#ppilot-tests-catalogue-root .ppx-why-checks .ppx-tick .ppmk-icon { width: 12px; height: 12px; }
@media (max-width: 1279px) {
	#ppilot-tests-catalogue-root .ppx-split--3 { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
	#ppilot-tests-catalogue-root .ppx-split--3 .ppx-panel--why { grid-column: 1 / -1; }
	#ppilot-tests-catalogue-root .ppx-panel--why .ppx-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1099px) {
	#ppilot-tests-catalogue-root .ppx-split--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
	#ppilot-tests-catalogue-root .ppx-panel--why .ppx-caps { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   v0.50.0 — MARKETPLACE THEME-ISOLATION LAYER (keep LAST in this file;
   extended in v0.52.0 for img / input / select / summary / picture and
   the Filters sheet)
   ---------------------------------------------------------------------
   Same two-tier pattern as command-center.css / student-nav.css
   (v0.49.3), scoped to the marketplace subtree only via :where() so the
   Level-2/3 catalogue keeps its existing styling untouched:
     Tier 1 (1,0,1): `#root :where(.ppmk, .ppmk-modal-overlay) :is(el)`
       — every text element inherits colour/font from PracticePilot,
       headings/paragraphs/lists lose theme margins/sizes/bullets,
       links never underline/fade, theme button/select/input/img chrome is
       neutralised. Beats `.entry-content p` / `.entry-content img`
       (0,1,1) and bare `button`.
     Tier 2 (1,1,0+): every `.ppmk-*` rule above re-declares its OWN
       explicit colour/size, so it wins over Tier 1 and the theme.
   `!important` is used ONLY for opacity/filter on interaction states,
   where a real theme's `.entry-content a:hover{opacity:.7!important}`
   would otherwise fade CTAs (same justified pattern as v0.49.3).
   ===================================================================== */
#ppilot-tests-catalogue-root :where(.ppmk, .ppmk-modal-overlay) :is(h1, h2, h3, h4, h5, h6, p, span, li, strong, b, em, small, label, div, ul, ol, section, article, aside, nav, form, del, details, summary, picture) {
	color: inherit;
	font-family: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: none;
	text-shadow: none;
	opacity: 1;
}
#ppilot-tests-catalogue-root :where(.ppmk, .ppmk-modal-overlay) :is(h1, h2, h3, h4, h5, h6, p, ul, ol, li, details, summary) {
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: inherit;
	list-style: none;
	border: 0;
	background: none;
	text-decoration: none;
}
#ppilot-tests-catalogue-root :where(.ppmk, .ppmk-modal-overlay) :is(h1, h2, h3, h4, h5, h6)::before,
#ppilot-tests-catalogue-root :where(.ppmk, .ppmk-modal-overlay) :is(h1, h2, h3, h4, h5, h6)::after { content: none; }
#ppilot-tests-catalogue-root :where(.ppmk, .ppmk-modal-overlay) li::before,
#ppilot-tests-catalogue-root :where(.ppmk, .ppmk-modal-overlay) li::marker,
#ppilot-tests-catalogue-root :where(.ppmk, .ppmk-modal-overlay) summary::marker { content: none; }
#ppilot-tests-catalogue-root :where(.ppmk, .ppmk-modal-overlay) a,
#ppilot-tests-catalogue-root :where(.ppmk, .ppmk-modal-overlay) a:visited {
	text-decoration: none;
	border-bottom-style: none;
	font-family: inherit;
	opacity: 1;
	filter: none;
}
#ppilot-tests-catalogue-root :where(.ppmk, .ppmk-modal-overlay) a:hover,
#ppilot-tests-catalogue-root :where(.ppmk, .ppmk-modal-overlay) a:focus,
#ppilot-tests-catalogue-root :where(.ppmk, .ppmk-modal-overlay) a:focus-visible,
#ppilot-tests-catalogue-root :where(.ppmk, .ppmk-modal-overlay) a:active,
#ppilot-tests-catalogue-root :where(.ppmk, .ppmk-modal-overlay) button:hover,
#ppilot-tests-catalogue-root :where(.ppmk, .ppmk-modal-overlay) button:focus,
#ppilot-tests-catalogue-root :where(.ppmk, .ppmk-modal-overlay) button:focus-visible,
#ppilot-tests-catalogue-root :where(.ppmk, .ppmk-modal-overlay) button:active {
	text-decoration: none !important;
	opacity: 1 !important;
	filter: none !important;
}
#ppilot-tests-catalogue-root :where(.ppmk, .ppmk-modal-overlay) :is(button, input, select, textarea, optgroup, option) {
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	opacity: 1;
	filter: none;
	margin: 0;
}
#ppilot-tests-catalogue-root :where(.ppmk, .ppmk-modal-overlay) :is(input, select) {
	width: auto;
	max-width: none;
	line-height: 1.2;
	box-sizing: border-box;
}
#ppilot-tests-catalogue-root :where(.ppmk, .ppmk-modal-overlay) :is(button) { text-decoration: none; }
#ppilot-tests-catalogue-root :where(.ppmk, .ppmk-modal-overlay) img {
	box-shadow: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	max-width: none;
	background: none;
	display: block;
}

/* ==== v0.53.0 — entitlement-aware CTAs, "At a glance" facts ==== */
#ppilot-tests-catalogue-root .ppmk-card-actions .ppmk-btn--gold,
#ppilot-tests-catalogue-root .ppmk-card-actions .ppmk-btn--gold:visited { background: var(--mk-gold-2); border-color: var(--mk-gold-2); color: var(--mk-gold-ink); }
#ppilot-tests-catalogue-root .ppmk-card-actions .ppmk-btn--gold:hover { background: var(--mk-gold); border-color: var(--mk-gold); color: var(--mk-gold-ink); }
#ppilot-tests-catalogue-root .ppmk-btn--buy .ppmk-icon { width: 15px; height: 15px; flex: none; }
#ppilot-tests-catalogue-root .ppmk-modal-actions .ppmk-btn--alt,
#ppilot-tests-catalogue-root .ppmk-modal-actions .ppmk-btn--alt:visited { background: #eef2f7; border-color: #eef2f7; color: var(--mk-navy); }
#ppilot-tests-catalogue-root .ppmk-modal-actions .ppmk-btn--alt:hover { background: #e2e8f1; border-color: #e2e8f1; color: var(--mk-navy); }
#ppilot-tests-catalogue-root .ppmk-badge--owned { background: #dcfce7; color: #14532d; display: inline-flex; align-items: center; gap: 4px; }
#ppilot-tests-catalogue-root .ppmk-badge--owned .ppmk-icon { width: 12px; height: 12px; }
#ppilot-tests-catalogue-root .ppmk-glance { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 12px 0 4px; padding: 10px 12px; border-radius: 10px; background: #f6f8fb; border: 1px solid #e6ebf2; font-size: 13.5px; line-height: 1.45; }
#ppilot-tests-catalogue-root .ppmk-glance-row { display: contents; }
#ppilot-tests-catalogue-root .ppmk-glance dt { margin: 0; color: #5b6b82; font-weight: 600; }
#ppilot-tests-catalogue-root .ppmk-glance dd { margin: 0; color: var(--mk-navy); font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 420px) {
	#ppilot-tests-catalogue-root .ppmk-glance { grid-template-columns: 1fr; gap: 0; }
	#ppilot-tests-catalogue-root .ppmk-glance dd { margin-bottom: 6px; }
}


/* v0.54.0 — Renew state + stale-state notices (additive; scoped like every rule above). */
#ppilot-tests-catalogue-root .ppmk-badge--expired { background: #fef3c7; color: #78350f; display: inline-flex; align-items: center; gap: 4px; }
#ppilot-tests-catalogue-root .ppmk-badge--expired .ppmk-icon { width: 12px; height: 12px; }
#ppilot-tests-catalogue-root .ppmk-modal-pending .ppmk-modal-gone-btn { align-self: flex-start; }
#ppilot-tests-catalogue-root .ppilot-purchase-price-changed { margin: 0 0 12px; overflow-wrap: anywhere; }
#ppilot-tests-catalogue-root .ppilot-purchase-gone .ppilot-notice,
#ppilot-tests-catalogue-root .ppilot-purchase-owned .ppilot-notice { margin: 0 0 12px; overflow-wrap: anywhere; }

/* =====================================================================
   v0.78.0 §premium-level2-level3: premium treatment for the exam
   landing's category tiles (Level 2) and the category page's test cards
   (Level 3, now 4 per row). Appended AFTER every earlier rule and
   media query so it wins by source order at equal specificity; no
   !important anywhere. Applies to every exam/category/test, present and
   future — nothing here is keyed to a specific id.
   ===================================================================== */

/* ---- Level 2: category tiles ---- */
#ppilot-tests-catalogue-root .ppx-cat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
#ppilot-tests-catalogue-root .ppx-cat,
#ppilot-tests-catalogue-root .ppx-cat:visited {
	min-height: 196px; padding: 20px 18px 18px; border-radius: 20px; gap: 16px;
	background: #ffffff; border: 1px solid #e3e9f3;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px -18px rgba(15, 35, 80, 0.25);
	overflow: hidden; isolation: isolate;
}
#ppilot-tests-catalogue-root .ppx-cat::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; z-index: 1;
	background: var(--tone);
	background: linear-gradient(90deg, var(--tone) 0%, color-mix(in srgb, var(--tone) 55%, #ffffff) 100%);
}
#ppilot-tests-catalogue-root .ppx-cat::after {
	content: ""; position: absolute; right: -40px; top: -40px; width: 150px; height: 150px; border-radius: 50%; z-index: 0;
	background: radial-gradient(circle at center, var(--tone-soft) 0%, rgba(255, 255, 255, 0) 70%);
	transition: transform .35s ease;
}
#ppilot-tests-catalogue-root a.ppx-cat:hover::after { transform: scale(1.5); }
#ppilot-tests-catalogue-root a.ppx-cat:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--tone) 45%, #e3e9f3); box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05), 0 24px 44px -20px color-mix(in srgb, var(--tone) 55%, transparent); }
#ppilot-tests-catalogue-root .ppx-cat-head { position: relative; z-index: 1; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 10px; }
#ppilot-tests-catalogue-root .ppx-cat-icon {
	grid-row: auto; width: 56px; height: 56px; border-radius: 16px; border: 0;
	background: var(--tone);
	background: linear-gradient(145deg, var(--tone) 0%, color-mix(in srgb, var(--tone) 70%, #1e1b4b) 100%);
	color: #ffffff; box-shadow: 0 10px 20px -8px rgba(15, 35, 80, 0.4);
	box-shadow: 0 10px 20px -8px color-mix(in srgb, var(--tone) 70%, transparent);
}
#ppilot-tests-catalogue-root .ppx-cat-icon .ppmk-icon { width: 26px; height: 26px; }
#ppilot-tests-catalogue-root .ppx-cat-name { font-size: 16.5px; letter-spacing: -0.01em; }
#ppilot-tests-catalogue-root .ppx-cat-count { background: var(--tone-soft); border-color: transparent; color: var(--tone-ink); font-size: 12px; min-height: 26px; padding: 0 11px; }
#ppilot-tests-catalogue-root .ppx-cat-count--zero { background: #f3f5f9; color: #6b7a90; }
#ppilot-tests-catalogue-root .ppx-cat-foot { position: relative; z-index: 1; }
#ppilot-tests-catalogue-root .ppx-cat-desc { font-size: 13px; color: #5b6b82; }
#ppilot-tests-catalogue-root .ppx-cat-go { width: 38px; height: 38px; border: 0; background: var(--tone-soft); color: var(--tone); }
#ppilot-tests-catalogue-root .ppx-cat--empty { background: #fbfcfe; border-style: dashed; border-color: #dfe6f0; box-shadow: none; }
#ppilot-tests-catalogue-root .ppx-cat--empty::before { background: #e5e9f0; }
#ppilot-tests-catalogue-root .ppx-cat--empty::after { display: none; }
#ppilot-tests-catalogue-root .ppx-cat--empty .ppx-cat-icon { background: #eef1f6; color: #8d9bb0; box-shadow: none; filter: none; }

/* ---- Level 3: test cards, 4 per row ---- */
#ppilot-tests-catalogue-root .ppx-test-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
#ppilot-tests-catalogue-root .ppx-tcard {
	border-radius: 20px; border: 1px solid #e3e9f3;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px -20px rgba(15, 35, 80, 0.3);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#ppilot-tests-catalogue-root .ppx-tcard:hover { transform: translateY(-5px); border-color: #c9d6ea; box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05), 0 28px 48px -22px rgba(30, 58, 138, 0.35); }
#ppilot-tests-catalogue-root .ppx-tcard-media { aspect-ratio: 16 / 8; }
#ppilot-tests-catalogue-root .ppx-tcard-media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(10, 20, 45, 0.28) 100%); pointer-events: none; }
#ppilot-tests-catalogue-root .ppx-tcard.is-locked .ppx-tcard-media::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(17, 24, 39, 0.35), rgba(17, 24, 39, 0.05)); z-index: 1; pointer-events: none; }
#ppilot-tests-catalogue-root .ppx-tcard-flags { z-index: 2; }
#ppilot-tests-catalogue-root .ppx-flag { min-height: 26px; padding: 0 10px; font-size: 11.5px; letter-spacing: 0.02em; text-transform: uppercase; backdrop-filter: blur(6px); }
#ppilot-tests-catalogue-root .ppx-flag--free { background: linear-gradient(90deg, #16a34a, #15803d); }
#ppilot-tests-catalogue-root .ppx-flag--locked { background: rgba(17, 24, 39, 0.88); }
#ppilot-tests-catalogue-root .ppx-flag--premium { background: linear-gradient(90deg, #fcd34d, #f59e0b); color: #4a2b00; }
#ppilot-tests-catalogue-root .ppx-tcard-body { gap: 9px; padding: 14px 16px 16px; }
#ppilot-tests-catalogue-root .ppx-tcard-eyebrow { font-size: 11px; color: #5b6b82; }
#ppilot-tests-catalogue-root .ppx-tcard-title { font-size: 16px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
#ppilot-tests-catalogue-root .ppx-tcard-facts { gap: 4px 10px; }
#ppilot-tests-catalogue-root .ppx-tcard-facts li { font-size: 12.5px; color: #3f4f68; }
#ppilot-tests-catalogue-root .ppx-tcard-facts .ppmk-icon { width: 14px; height: 14px; }
#ppilot-tests-catalogue-root .ppx-tcard-foot { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 12px; }
#ppilot-tests-catalogue-root .ppx-tcard-foot .ppmk-btn,
#ppilot-tests-catalogue-root .ppx-tcard-foot .ppmk-btn:visited { width: 100%; justify-content: center; min-height: 42px; border-radius: 12px; font-size: 14px; font-weight: 800; }
#ppilot-tests-catalogue-root .ppx-tcard.is-locked .ppx-tcard-foot .ppmk-btn--primary,
#ppilot-tests-catalogue-root .ppx-tcard.is-locked .ppx-tcard-foot .ppmk-btn--primary:visited { background: linear-gradient(90deg, #f59e0b 0%, #f97316 100%); border-color: transparent; color: #1f1300; box-shadow: 0 8px 18px -8px rgba(249, 115, 22, 0.7); }
#ppilot-tests-catalogue-root .ppx-tcard.is-locked .ppx-tcard-foot .ppmk-btn--primary:hover { filter: brightness(1.05); color: #1f1300; }
#ppilot-tests-catalogue-root .ppx-tcard:not(.is-locked) .ppx-tcard-foot .ppmk-btn--primary,
#ppilot-tests-catalogue-root .ppx-tcard:not(.is-locked) .ppx-tcard-foot .ppmk-btn--primary:visited { background: linear-gradient(90deg, #1e3a8a 0%, #2563eb 100%); border-color: transparent; box-shadow: 0 8px 18px -8px rgba(37, 99, 235, 0.7); }
#ppilot-tests-catalogue-root .ppx-tcard-price { flex-direction: row; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; }
#ppilot-tests-catalogue-root .ppx-price { font-size: 18px; }

/* ---- responsive (same breakpoints the base file uses) ---- */
@media (max-width: 1280px) {
	#ppilot-tests-catalogue-root .ppx-test-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	#ppilot-tests-catalogue-root .ppx-cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
	#ppilot-tests-catalogue-root .ppx-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
	#ppilot-tests-catalogue-root .ppx-test-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 767px) {
	#ppilot-tests-catalogue-root .ppx-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	#ppilot-tests-catalogue-root .ppx-cat,
	#ppilot-tests-catalogue-root .ppx-cat:visited { min-height: 0; padding: 14px 12px 12px; gap: 10px; border-radius: 16px; }
	#ppilot-tests-catalogue-root .ppx-cat-icon { width: 44px; height: 44px; border-radius: 13px; }
	#ppilot-tests-catalogue-root .ppx-cat-icon .ppmk-icon { width: 22px; height: 22px; }
	#ppilot-tests-catalogue-root .ppx-cat-name { font-size: 14.5px; }
	#ppilot-tests-catalogue-root .ppx-cat::after { display: none; }
	#ppilot-tests-catalogue-root .ppx-test-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	#ppilot-tests-catalogue-root .ppx-tcard-title { min-height: 0; }
}
@media (min-width: 768px) and (max-width: 1023px) {
	#ppilot-tests-catalogue-root .ppx-cat-head { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
}

/* v0.78.1 §unlock-login-prompt: Log In / Sign Up prompt for logged-out Unlock clicks (same overlay as checkout). */
#ppilot-tests-catalogue-root .ppilot-login-prompt { text-align: center; max-width: 440px; }
#ppilot-tests-catalogue-root .ppilot-login-prompt .ppilot-login-required-icon { font-size: 40px; line-height: 1; margin: 6px 0 10px; }
#ppilot-tests-catalogue-root .ppilot-login-prompt .ppilot-login-required-title { font-size: 20px; font-weight: 800; color: #1e1b4b; margin: 0 0 8px; }
#ppilot-tests-catalogue-root .ppilot-login-prompt .ppilot-login-required-subtitle { color: #4b5563; font-size: 14px; line-height: 1.5; margin: 0 0 18px; }
#ppilot-tests-catalogue-root .ppilot-login-prompt .ppilot-login-required-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
#ppilot-tests-catalogue-root .ppilot-login-prompt .ppilot-login-required-cta,
#ppilot-tests-catalogue-root .ppilot-login-prompt .ppilot-login-required-cta:visited { display: inline-flex; align-items: center; justify-content: center; min-width: 130px; min-height: 44px; padding: 0 20px; border-radius: 12px; font-weight: 800; font-size: 14.5px; text-decoration: none; border: 1.5px solid #2563eb; color: #2563eb; background: #fff; }
#ppilot-tests-catalogue-root .ppilot-login-prompt .ppilot-login-required-cta.ppilot-btn-primary,
#ppilot-tests-catalogue-root .ppilot-login-prompt .ppilot-login-required-cta.ppilot-btn-primary:visited { background: linear-gradient(90deg, #1e3a8a, #2563eb); color: #fff; border-color: transparent; box-shadow: 0 8px 18px -8px rgba(37, 99, 235, 0.7); }
#ppilot-tests-catalogue-root .ppilot-login-prompt .ppilot-login-required-cta:hover { filter: brightness(1.05); }