/* PracticePilot — Analytics / My Performance (v0.57.0 premium redesign).
   Shares the v0.56.0 My Weak Areas design system (tokens copied, scoped here —
   no global stylesheet): navy/indigo gradient hero, 20px cards, soft shadows,
   stat tiles, pills, ring and inline-SVG charts.
   Theme isolation follows the v0.49.3 two-tier pattern:
   TIER 1 — every rule is scoped under the #ppilot-analytics-root ID
            (specificity 1,x,x), beating a theme's element / .entry-content
            rules regardless of source order; no unscoped selectors.
   TIER 2 — every text-bearing element sets its own color, decoration,
            font-family and margin; the only !important declarations are
            scoped to this root's links/buttons (neutralising a theme's own
            !important hover fade) and the reduced-motion override.
   Mobile-first; status/sentiment never conveyed by colour alone. */

body.ppilot-analytics-page .entry-header,
body.ppilot-analytics-page .entry-title,
body.ppilot-analytics-page h1.entry-title,
body.ppilot-analytics-page .page-title,
body.ppilot-analytics-page .wp-block-post-title,
body.ppilot-analytics-page .elementor-widget-theme-page-title {
	display: none !important;
}

#ppilot-analytics-root {
	--ppan-navy: #0b1f45;
	--ppan-royal: #2547d0;
	--ppan-blue: #2563eb;
	--ppan-purple: #6d3fd8;
	--ppan-violet: #7c3aed;
	--ppan-cyan: #0e7490;
	--ppan-green: #0f7a55;
	--ppan-amber: #a14a06;
	--ppan-red: #b42318;
	--ppan-ink: #0f172a;
	--ppan-body: #334155;
	--ppan-muted: #4b5565;
	--ppan-line: #e3e8f2;
	--ppan-bg: #f4f6fb;
	--ppan-card: #ffffff;
	--ppan-radius: 20px;
	--ppan-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .06);
	--ppan-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	display: block;
	width: 100%;
	max-width: 1360px;
	margin: 0 auto 32px;
	padding: 0;
	font-family: var(--ppan-font);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ppan-body);
	text-align: left;
	-webkit-font-smoothing: antialiased;
}
#ppilot-analytics-root *,
#ppilot-analytics-root *::before,
#ppilot-analytics-root *::after { box-sizing: border-box; }

/* ---- TIER 2 baseline ---- */
#ppilot-analytics-root div,
#ppilot-analytics-root section,
#ppilot-analytics-root figure { line-height: inherit; margin: 0; padding: 0; border: 0; font-family: var(--ppan-font); }
#ppilot-analytics-root h1,
#ppilot-analytics-root h2,
#ppilot-analytics-root h3 {
	font-family: var(--ppan-font); color: var(--ppan-ink); margin: 0; padding: 0; border: 0;
	text-decoration: none; text-transform: none; letter-spacing: -.01em; line-height: 1.25; font-weight: 700; background: none;
}
#ppilot-analytics-root p,
#ppilot-analytics-root span,
#ppilot-analytics-root li,
#ppilot-analytics-root label,
#ppilot-analytics-root dt,
#ppilot-analytics-root dd,
#ppilot-analytics-root th,
#ppilot-analytics-root td,
#ppilot-analytics-root caption,
#ppilot-analytics-root figcaption {
	font-family: var(--ppan-font); color: inherit; margin: 0; padding: 0; text-decoration: none; text-transform: none; letter-spacing: normal; line-height: inherit; font-size: inherit;
}
#ppilot-analytics-root ul,
#ppilot-analytics-root ol,
#ppilot-analytics-root dl { list-style: none; margin: 0; padding: 0; }
#ppilot-analytics-root li { margin: 0; }
#ppilot-analytics-root li::before,
#ppilot-analytics-root li::marker { content: none; color: transparent; }
#ppilot-analytics-root a,
#ppilot-analytics-root a:visited,
#ppilot-analytics-root a:hover,
#ppilot-analytics-root a:focus,
#ppilot-analytics-root a:active {
	text-decoration: none; border-bottom: 0; box-shadow: none; font-family: var(--ppan-font);
	opacity: 1 !important; filter: none !important;
}
#ppilot-analytics-root button,
#ppilot-analytics-root button:hover,
#ppilot-analytics-root button:focus {
	font-family: var(--ppan-font); text-transform: none; letter-spacing: normal; box-shadow: none;
	opacity: 1 !important; filter: none !important;
}
#ppilot-analytics-root svg { display: inline-block; vertical-align: middle; max-width: 100%; overflow: visible; }
#ppilot-analytics-root .ppan-icon { width: 20px; height: 20px; flex: 0 0 auto; }
#ppilot-analytics-root :focus { outline: none; }
#ppilot-analytics-root :focus-visible { outline: 3px solid #2547d0; outline-offset: 2px; }
#ppilot-analytics-root .ppan-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;
}

/* ---- tone helpers (icon squares) ---- */
#ppilot-analytics-root .ppan-tone--blue { background: #eef4ff; color: var(--ppan-royal); }
#ppilot-analytics-root .ppan-tone--indigo { background: #eef2ff; color: #3730a3; }
#ppilot-analytics-root .ppan-tone--red { background: #fef3f2; color: var(--ppan-red); }
#ppilot-analytics-root .ppan-tone--purple { background: #f5f1ff; color: var(--ppan-purple); }
#ppilot-analytics-root .ppan-tone--violet { background: #f3efff; color: var(--ppan-violet); }
#ppilot-analytics-root .ppan-tone--green { background: #e8f7ef; color: var(--ppan-green); }
#ppilot-analytics-root .ppan-tone--amber { background: #fff4e5; color: var(--ppan-amber); }

/* ---- HERO ---- */
#ppilot-analytics-root .ppan-hero {
	position: relative; overflow: hidden; display: flex; align-items: center; gap: 20px;
	padding: 24px 20px; margin: 0 0 16px; border-radius: var(--ppan-radius);
	background: radial-gradient(120% 140% at 100% 0%, #3b2a8c 0%, rgba(59, 42, 140, 0) 55%), linear-gradient(135deg, #0b1f45 0%, #16306a 60%, #1d3f7a 100%);
	color: #ffffff;
}
/* v0.57.1 hotfix (live-screenshot report): this page's backend
   (PerformanceOverviewService::resolve_analytics_hero_image(), v0.57.0) has
   always resolved a real hero photo, but until now there was no CSS rule
   here to paint it with ANY overlay once analytics.js's own wiring gap
   (fixed alongside this) applied it — a real photo would have rendered
   completely raw behind white text. Mirrors the exact overlay treatment
   (stops/floor) and text-shadow already fixed on the other hero pages,
   itself matching the proven Dashboard hero (command-center.css
   .ppilot-cc-hero). */
#ppilot-analytics-root .ppan-hero--image {
	background-color: #0b1f45;
	/* v0.57.2 hotfix: verbatim Dashboard hero gradient (command-center.css
	   .ppilot-cc-hero, owner-confirmed correct), replacing the v0.57.1
	   page-specific alpha tune that still looked washed out live. */
	background-image: linear-gradient(90deg, rgba(7, 15, 34, 0.86) 0%, rgba(9, 24, 54, 0.72) 45%, rgba(11, 31, 69, 0.6) 72%, rgba(11, 31, 69, 0.28) 100%), var(--ppan-hero-mobile, none);
	background-size: cover; background-position: center right;
}
#ppilot-analytics-root .ppan-hero--image .ppan-hero-art { visibility: hidden; }
#ppilot-analytics-root .ppan-hero-main { position: relative; z-index: 1; min-width: 0; flex: 1 1 auto; }
#ppilot-analytics-root .ppan-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #e0e7ff; font-size: 12px; font-weight: 700; }
#ppilot-analytics-root .ppan-hero-eyebrow .ppan-icon { width: 16px; height: 16px; color: #fbbf24; }
#ppilot-analytics-root .ppan-hero-eyebrow-text { color: #e0e7ff !important; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
/* v0.57.3 hotfix: same !important hardening as weak-areas.css — mirrors
   command-center.css's proven .ppilot-cc-hero-greeting-prefix pattern. */
#ppilot-analytics-root .ppan-hero-title { color: #ffffff !important; font-size: 28px; line-height: 1.12; font-weight: 800 !important; margin: 0 0 8px; text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 2px 10px rgba(0, 0, 0, .35) !important; }
#ppilot-analytics-root .ppan-hero-sub { color: #dbe4ff !important; font-size: 15px; line-height: 1.55; margin: 0; max-width: 640px; text-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3) !important; }
#ppilot-analytics-root .ppan-hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
#ppilot-analytics-root .ppan-hero-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 12px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); }
#ppilot-analytics-root .ppan-hero-chip-value { color: #ffffff; font-size: 17px; font-weight: 800; line-height: 1.1; }
#ppilot-analytics-root .ppan-hero-chip-label { color: #dbe4ff; font-size: 13px; font-weight: 600; }
#ppilot-analytics-root .ppan-hero-art { display: none; position: relative; z-index: 1; flex: 0 0 auto; width: 170px; height: 136px; }
#ppilot-analytics-root .ppan-hero-svg { width: 100%; height: 100%; }

/* ---- CARDS ---- */
#ppilot-analytics-root .ppan-card {
	background: var(--ppan-card); border: 1px solid var(--ppan-line); border-radius: var(--ppan-radius);
	box-shadow: var(--ppan-shadow); padding: 18px; min-width: 0; color: var(--ppan-body);
}
#ppilot-analytics-root .ppan-card[aria-busy="true"] .ppan-ov-body { opacity: .55; transition: opacity .15s ease; }
#ppilot-analytics-root .ppan-card-head { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px; flex-wrap: wrap; }
#ppilot-analytics-root .ppan-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto; }
#ppilot-analytics-root .ppan-card-titles { min-width: 0; flex: 1 1 160px; }
#ppilot-analytics-root .ppan-card-title { color: var(--ppan-ink); font-size: 17px; font-weight: 750; line-height: 1.3; margin: 0; }
#ppilot-analytics-root .ppan-card-sub { color: var(--ppan-muted); font-size: 13px; line-height: 1.45; margin: 2px 0 0; }
#ppilot-analytics-root .ppan-card-action { flex: 0 0 auto; margin-left: auto; }

/* ---- Buttons & links ---- */
#ppilot-analytics-root .ppan-btn,
#ppilot-analytics-root .ppan-btn:visited {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px;
	border-radius: 12px; border: 1px solid transparent; font-size: 14px; font-weight: 700; line-height: 1.2; cursor: pointer;
	white-space: nowrap; text-decoration: none; text-transform: none; background: #eef2ff; color: var(--ppan-royal); margin: 0; width: auto; height: auto;
	transition: background-color .15s ease, transform .15s ease, border-color .15s ease;
}
#ppilot-analytics-root .ppan-btn .ppan-btn-text { color: inherit; font-weight: 700; }
#ppilot-analytics-root .ppan-btn .ppan-icon { width: 18px; height: 18px; transition: transform .15s ease; }
#ppilot-analytics-root .ppan-btn--sm,
#ppilot-analytics-root .ppan-btn--sm:visited { min-height: 40px; padding: 8px 14px; font-size: 13.5px; }
#ppilot-analytics-root .ppan-btn--primary,
#ppilot-analytics-root .ppan-btn--primary:visited,
#ppilot-analytics-root .ppan-btn--primary:hover,
#ppilot-analytics-root .ppan-btn--primary:focus { background: #2f40cd linear-gradient(135deg, #2547d0, #4338ca); color: #ffffff; border-color: transparent; }
#ppilot-analytics-root .ppan-btn--primary:hover { background: #2935ab linear-gradient(135deg, #1e3bb3, #3730a3); transform: translateY(-1px); }
#ppilot-analytics-root .ppan-btn--ghost,
#ppilot-analytics-root .ppan-btn--ghost:visited,
#ppilot-analytics-root .ppan-btn--ghost:hover,
#ppilot-analytics-root .ppan-btn--ghost:focus { background: #ffffff; color: var(--ppan-navy); border-color: #cdd6e8; }
#ppilot-analytics-root .ppan-btn--ghost:hover { border-color: #9fb0d8; background: #f7f9ff; }
#ppilot-analytics-root .ppan-btn--soft,
#ppilot-analytics-root .ppan-btn--soft:visited,
#ppilot-analytics-root .ppan-btn--soft:hover,
#ppilot-analytics-root .ppan-btn--soft:focus { background: #fef3f2; color: var(--ppan-red); border-color: #fde2df; }
#ppilot-analytics-root .ppan-rot { transform: rotate(90deg); }
#ppilot-analytics-root .ppan-icon-btn {
	display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-height: 40px; padding: 0; margin: 0;
	border-radius: 12px; border: 1px solid var(--ppan-line); background: #ffffff; color: var(--ppan-navy); cursor: pointer; flex: 0 0 auto;
	transition: border-color .15s ease, background-color .15s ease;
}
#ppilot-analytics-root .ppan-icon-btn:hover { border-color: #9fb0d8; background: #f7f9ff; color: var(--ppan-navy); }
#ppilot-analytics-root .ppan-icon-btn .ppan-icon { transition: transform .15s ease; }
#ppilot-analytics-root .ppan-icon-btn.is-open .ppan-icon { transform: rotate(90deg); }
#ppilot-analytics-root .ppan-select,
#ppilot-analytics-root .ppan-select:focus {
	display: block; width: 100%; min-width: 160px; height: 44px; min-height: 44px; margin: 0; padding: 0 36px 0 14px;
	border: 1px solid #cdd6e8; border-radius: 12px; background-color: #ffffff; color: var(--ppan-ink);
	font-family: var(--ppan-font); font-size: 14px; font-weight: 600; line-height: 1.2; box-shadow: none; text-transform: none;
	-webkit-appearance: none; appearance: none; cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, #4b5565 50%), linear-gradient(135deg, #4b5565 50%, transparent 50%);
	background-position: calc(100% - 19px) 19px, calc(100% - 14px) 19px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
#ppilot-analytics-root .ppan-select:focus-visible { outline: 3px solid #2547d0; outline-offset: 1px; border-color: #2547d0; }
#ppilot-analytics-root .ppan-select[disabled] { background-color: #f1f4f9; color: #4b5565; cursor: progress; }
#ppilot-analytics-root .ppan-inline-error { color: var(--ppan-red); background: #fef3f2; border: 1px solid #fecdca; border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600; margin: 0 0 12px; }

/* ---- KPI ROW ---- */
#ppilot-analytics-root .ppan-kpis-wrap { margin: 0 0 16px; }
#ppilot-analytics-root .ppan-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#ppilot-analytics-root .ppan-kpi {
	display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 14px 12px;
	background: var(--ppan-card); border: 1px solid var(--ppan-line); border-radius: 18px; box-shadow: var(--ppan-shadow);
}
#ppilot-analytics-root .ppan-kpi-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto; }
#ppilot-analytics-root .ppan-kpi-icon .ppan-icon { width: 22px; height: 22px; }
#ppilot-analytics-root .ppan-kpi-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
#ppilot-analytics-root .ppan-kpi-trend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
#ppilot-analytics-root .ppan-kpi-value { color: var(--ppan-ink); font-size: 21px; font-weight: 800; line-height: 1.15; }
#ppilot-analytics-root .ppan-kpi-label { color: var(--ppan-body); font-size: 13px; font-weight: 650; line-height: 1.3; margin-top: 2px; }
#ppilot-analytics-root .ppan-kpi-caption { color: var(--ppan-muted); font-size: 11.5px; line-height: 1.3; }
#ppilot-analytics-root .ppan-delta { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px 2px 4px; border-radius: 999px; font-size: 12px; font-weight: 750; white-space: nowrap; line-height: 1.4; }
#ppilot-analytics-root .ppan-delta-text { color: inherit; }
#ppilot-analytics-root .ppan-delta .ppan-delta-icon { width: 16px; height: 16px; }
#ppilot-analytics-root .ppan-delta--positive { background: #e8f7ef; color: var(--ppan-green); }
#ppilot-analytics-root .ppan-delta--negative { background: #fef3f2; color: var(--ppan-red); }
#ppilot-analytics-root .ppan-delta--neutral { background: #eef2f7; color: var(--ppan-body); padding-left: 8px; }

/* ---- ROWS ---- */
#ppilot-analytics-root .ppan-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0 0 16px; align-items: stretch; }
#ppilot-analytics-root .ppan-ov-host { min-width: 0; display: flex; }
#ppilot-analytics-root .ppan-ov-host > .ppan-card { flex: 1 1 auto; }

/* ---- PERFORMANCE OVERVIEW ---- */
#ppilot-analytics-root .ppan-range { width: 100%; }
#ppilot-analytics-root .ppan-ov-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; }
#ppilot-analytics-root .ppan-chart { min-width: 0; position: relative; }
#ppilot-analytics-root .ppan-chart-host { width: 100%; min-height: 210px; }
#ppilot-analytics-root .ppan-chart-svg { display: block; width: 100%; height: auto; }
#ppilot-analytics-root .ppan-grid { stroke: #e8ecf4; stroke-width: 1; }
#ppilot-analytics-root .ppan-axis { fill: #4b5565; font-size: 12px; font-family: var(--ppan-font); }
#ppilot-analytics-root .ppan-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#ppilot-analytics-root .ppan-line--accuracy { stroke: #2563eb; }
#ppilot-analytics-root .ppan-line--score { stroke: #8b5cf6; stroke-dasharray: 0; }
#ppilot-analytics-root .ppan-dot { stroke: #ffffff; stroke-width: 2; }
#ppilot-analytics-root .ppan-dot.ppan-line--accuracy { fill: #2563eb; }
#ppilot-analytics-root .ppan-dot.ppan-line--score { fill: #8b5cf6; }
#ppilot-analytics-root .ppan-legend { display: flex; justify-content: flex-end; gap: 16px; margin: 0 0 6px; flex-wrap: wrap; }
#ppilot-analytics-root .ppan-legend-item { display: inline-flex; align-items: center; gap: 6px; }
#ppilot-analytics-root .ppan-legend-text { color: var(--ppan-body); font-size: 13px; font-weight: 650; }
#ppilot-analytics-root .ppan-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
#ppilot-analytics-root .ppan-legend-dot--accuracy { background: #2563eb; }
#ppilot-analytics-root .ppan-legend-dot--score { background: #8b5cf6; }
#ppilot-analytics-root .ppan-chart-caption { color: var(--ppan-muted); font-size: 12.5px; line-height: 1.45; margin: 8px 0 0; }
#ppilot-analytics-root .ppan-chart--empty { display: flex; align-items: center; }
#ppilot-analytics-root .ppan-chart--empty .ppan-empty { width: 100%; min-height: 200px; justify-content: center; }

#ppilot-analytics-root .ppan-score { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--ppan-line); border-radius: 16px; background: #fbfcfe; }
#ppilot-analytics-root .ppan-ring { position: relative; width: 138px; height: 138px; flex: 0 0 auto; }
#ppilot-analytics-root .ppan-ring-svg { width: 100%; height: 100%; }
#ppilot-analytics-root .ppan-ring-arc { transition: stroke-dasharray .8s ease; }
#ppilot-analytics-root .ppan-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
#ppilot-analytics-root .ppan-ring-value { color: var(--ppan-ink); font-size: 27px; font-weight: 800; line-height: 1.05; }
#ppilot-analytics-root .ppan-ring-caption { color: var(--ppan-muted); font-size: 12px; font-weight: 600; margin-top: 2px; }
#ppilot-analytics-root .ppan-score-list { width: 100%; display: flex; flex-direction: column; gap: 8px; }
#ppilot-analytics-root .ppan-score-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#ppilot-analytics-root .ppan-score-label { display: inline-flex; align-items: center; gap: 8px; color: var(--ppan-body); font-size: 13.5px; font-weight: 600; }
#ppilot-analytics-root .ppan-score-label-text { color: var(--ppan-body); }
#ppilot-analytics-root .ppan-score-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
#ppilot-analytics-root .ppan-score-dot--blue { background: #2563eb; }
#ppilot-analytics-root .ppan-score-dot--purple { background: #8b5cf6; }
#ppilot-analytics-root .ppan-score-dot--green { background: #10b981; }
#ppilot-analytics-root .ppan-score-dot--amber { background: #f59e0b; }
#ppilot-analytics-root .ppan-score-value { color: var(--ppan-ink); font-size: 14px; font-weight: 800; }

/* ---- SUBJECTS ---- */
#ppilot-analytics-root .ppan-subjects { display: flex; flex-direction: column; gap: 14px; }
#ppilot-analytics-root .ppan-subject-row { display: flex; align-items: flex-start; gap: 12px; }
#ppilot-analytics-root .ppan-subject-badge { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; font-size: 14px; font-weight: 800; flex: 0 0 auto; color: #ffffff; }
#ppilot-analytics-root .ppan-subject-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 5px; }
#ppilot-analytics-root .ppan-subject-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
#ppilot-analytics-root .ppan-subject-name { color: var(--ppan-ink); font-size: 14.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
#ppilot-analytics-root .ppan-subject-acc { color: var(--ppan-ink); font-size: 14px; font-weight: 800; white-space: nowrap; }
#ppilot-analytics-root .ppan-subject-meta { color: var(--ppan-muted); font-size: 12px; }
#ppilot-analytics-root .ppan-bar { display: block; width: 100%; height: 9px; border-radius: 999px; background: #e9edf5; overflow: hidden; }
#ppilot-analytics-root .ppan-bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2547d0, #6d3fd8); }
#ppilot-analytics-root .ppan-swatch--0 { background: #2563eb; }
#ppilot-analytics-root .ppan-swatch--1 { background: #7c3aed; }
#ppilot-analytics-root .ppan-swatch--2 { background: #0d9488; }
#ppilot-analytics-root .ppan-swatch--3 { background: #4f46e5; }
#ppilot-analytics-root .ppan-swatch--4 { background: #0369a1; }
#ppilot-analytics-root .ppan-swatch--5 { background: #9333ea; }
#ppilot-analytics-root .ppan-topics { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0 44px; padding: 10px 12px; border-radius: 12px; background: var(--ppan-bg); }
#ppilot-analytics-root .ppan-topic { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#ppilot-analytics-root .ppan-topic-name { color: var(--ppan-ink); font-size: 13px; font-weight: 650; flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
#ppilot-analytics-root .ppan-topic-acc { color: var(--ppan-body); font-size: 12.5px; font-weight: 650; white-space: nowrap; }
#ppilot-analytics-root .ppan-pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
#ppilot-analytics-root .ppan-pill--strong { background: #e8f7ef; color: var(--ppan-green); }
#ppilot-analytics-root .ppan-pill--needs_improvement { background: #fef3f2; color: var(--ppan-red); }
#ppilot-analytics-root .ppan-pill--insufficient_data { background: #eef4ff; color: var(--ppan-royal); }

/* ---- RECENT ACTIVITY ---- */
#ppilot-analytics-root .ppan-recent { display: flex; flex-direction: column; gap: 4px; }
#ppilot-analytics-root .ppan-recent-item { border-bottom: 1px solid #eef1f7; padding: 8px 0; }
#ppilot-analytics-root .ppan-recent-item:last-child { border-bottom: 0; }
#ppilot-analytics-root .ppan-recent-row { display: flex; align-items: center; gap: 10px; }
#ppilot-analytics-root .ppan-recent-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px; flex: 0 0 auto; }
#ppilot-analytics-root .ppan-recent-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; }
#ppilot-analytics-root .ppan-recent-title { color: var(--ppan-ink); font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
#ppilot-analytics-root .ppan-recent-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#ppilot-analytics-root .ppan-tag { display: inline-flex; padding: 1px 8px; border-radius: 6px; background: #eef2f7; color: var(--ppan-body); font-size: 11.5px; font-weight: 650; }
#ppilot-analytics-root .ppan-recent-date { color: var(--ppan-muted); font-size: 12px; }
#ppilot-analytics-root .ppan-recent-score { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: 0 0 auto; }
#ppilot-analytics-root .ppan-score-pill { display: inline-flex; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 800; white-space: nowrap; }
#ppilot-analytics-root .ppan-tier--high { background: #e8f7ef; color: var(--ppan-green); }
#ppilot-analytics-root .ppan-tier--mid { background: #fff4e5; color: var(--ppan-amber); }
#ppilot-analytics-root .ppan-tier--low { background: #fef3f2; color: var(--ppan-red); }
#ppilot-analytics-root .ppan-recent-marks { color: var(--ppan-muted); font-size: 12px; font-weight: 650; white-space: nowrap; }
#ppilot-analytics-root .ppan-result-panel { margin-top: 10px; padding: 12px; border-radius: 14px; background: var(--ppan-bg); overflow-x: auto; }

/* ---- STRENGTHS (tabs) ---- */
#ppilot-analytics-root .ppan-tabs { display: flex; gap: 6px; margin: 0 0 14px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
#ppilot-analytics-root .ppan-tab {
	display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 8px 11px; margin: 0;
	border-radius: 12px; border: 1px solid var(--ppan-line); background: #ffffff; color: var(--ppan-body);
	font-size: 13.5px; font-weight: 700; white-space: nowrap; cursor: pointer; flex: 0 0 auto; line-height: 1.2;
}
#ppilot-analytics-root .ppan-tab:hover { border-color: #b9c6ea; background: #f8faff; color: var(--ppan-ink); }
#ppilot-analytics-root .ppan-tab-text { color: inherit; }
#ppilot-analytics-root .ppan-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #eef2f7; color: var(--ppan-body); font-size: 12px; font-weight: 800; }
#ppilot-analytics-root .ppan-tab--weak.is-active { background: #fef3f2; border-color: #f4b7b0; color: var(--ppan-red); }
#ppilot-analytics-root .ppan-tab--strong.is-active { background: #e8f7ef; border-color: #a7dcc1; color: var(--ppan-green); }
#ppilot-analytics-root .ppan-tab--needs_practice.is-active { background: #eef4ff; border-color: #b9cbf5; color: var(--ppan-royal); }
#ppilot-analytics-root .ppan-tab.is-active .ppan-tab-count { background: #ffffff; color: inherit; }
#ppilot-analytics-root .ppan-tabpanel { min-width: 0; }
#ppilot-analytics-root .ppan-areas { display: flex; flex-direction: column; gap: 12px; }
#ppilot-analytics-root .ppan-area {
	display: grid; align-items: center; column-gap: 10px; row-gap: 6px;
	grid-template-columns: 26px minmax(0, 1fr) auto;
	grid-template-areas: "rank main acc" "rank bar meta";
}
#ppilot-analytics-root .ppan-area-rank { grid-area: rank; align-self: start; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; font-size: 13px; font-weight: 800; color: #ffffff; background: #94a3b8; }
#ppilot-analytics-root .ppan-area--weak .ppan-area-rank { background: #d92d20; }
#ppilot-analytics-root .ppan-area--strong .ppan-area-rank { background: #0f7a55; }
#ppilot-analytics-root .ppan-area--needs_practice .ppan-area-rank { background: #2547d0; }
#ppilot-analytics-root .ppan-area-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; }
#ppilot-analytics-root .ppan-area-name { color: var(--ppan-ink); font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
#ppilot-analytics-root .ppan-area-subject { color: var(--ppan-muted); font-size: 12px; line-height: 1.3; }
#ppilot-analytics-root .ppan-area .ppan-bar { grid-area: bar; height: 8px; }
#ppilot-analytics-root .ppan-area-acc { grid-area: acc; color: var(--ppan-ink); font-size: 14px; font-weight: 800; text-align: right; white-space: nowrap; }
#ppilot-analytics-root .ppan-area-meta { grid-area: meta; justify-self: end; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
#ppilot-analytics-root .ppan-area-meta--weak { background: #fef3f2; color: var(--ppan-red); }
#ppilot-analytics-root .ppan-area-meta--strong { background: #e8f7ef; color: var(--ppan-green); }
#ppilot-analytics-root .ppan-area-meta--needs_practice { background: #eef4ff; color: var(--ppan-royal); }
#ppilot-analytics-root .ppan-bar-fill--weak { background: linear-gradient(90deg, #ef4444, #f97316); }
#ppilot-analytics-root .ppan-bar-fill--strong { background: linear-gradient(90deg, #10b981, #059669); }
#ppilot-analytics-root .ppan-bar-fill--needs_practice { background: linear-gradient(90deg, #60a5fa, #2563eb); }
#ppilot-analytics-root .ppan-tab-empty { color: var(--ppan-muted); font-size: 14px; line-height: 1.55; padding: 16px; border-radius: 12px; background: var(--ppan-bg); }
#ppilot-analytics-root .ppan-tab-more { color: var(--ppan-muted); font-size: 12.5px; margin-top: 10px; }
#ppilot-analytics-root .ppan-tab-cta { margin-top: 14px; }

/* ---- INSIGHTS ---- */
#ppilot-analytics-root .ppan-insights { display: flex; flex-direction: column; gap: 10px; }
#ppilot-analytics-root .ppan-insight-link,
#ppilot-analytics-root .ppan-insight-link:visited,
#ppilot-analytics-root .ppan-insight-link:hover,
#ppilot-analytics-root .ppan-insight-link:focus {
	display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid transparent;
	color: var(--ppan-ink); min-height: 44px; transition: transform .15s ease, box-shadow .15s ease;
}
#ppilot-analytics-root a.ppan-insight-link:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 23, 42, .08); }
#ppilot-analytics-root .ppan-insight-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px; background: #ffffff; flex: 0 0 auto; }
#ppilot-analytics-root .ppan-insight-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
#ppilot-analytics-root .ppan-insight-title { color: var(--ppan-ink); font-size: 14px; font-weight: 750; line-height: 1.3; }
#ppilot-analytics-root .ppan-insight-body { color: var(--ppan-body); font-size: 13px; line-height: 1.45; }
#ppilot-analytics-root .ppan-insight-go { display: inline-flex; align-self: center; color: var(--ppan-navy); flex: 0 0 auto; }
#ppilot-analytics-root .ppan-insight--positive .ppan-insight-link { background: #eefaf3; border-color: #cdeedb; }
#ppilot-analytics-root .ppan-insight--positive .ppan-insight-icon { color: var(--ppan-green); }
#ppilot-analytics-root .ppan-insight--negative .ppan-insight-link { background: #fff5f4; border-color: #fbd5d0; }
#ppilot-analytics-root .ppan-insight--negative .ppan-insight-icon { color: var(--ppan-red); }
#ppilot-analytics-root .ppan-insight--warning .ppan-insight-link { background: #fff8eb; border-color: #fbe3b8; }
#ppilot-analytics-root .ppan-insight--warning .ppan-insight-icon { color: var(--ppan-amber); }
#ppilot-analytics-root .ppan-insight--neutral .ppan-insight-link { background: #f1f5ff; border-color: #dbe4fb; }
#ppilot-analytics-root .ppan-insight--neutral .ppan-insight-icon { color: var(--ppan-royal); }

/* ---- NEXT STEPS ---- */
#ppilot-analytics-root .ppan-next { margin: 0 0 16px; }
#ppilot-analytics-root .ppan-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
#ppilot-analytics-root .ppan-step-link,
#ppilot-analytics-root .ppan-step-link:visited,
#ppilot-analytics-root .ppan-step-link:hover,
#ppilot-analytics-root .ppan-step-link:focus {
	display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; border-radius: 16px;
	border: 1px solid var(--ppan-line); background: #ffffff; color: var(--ppan-ink);
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
#ppilot-analytics-root .ppan-step-link:hover { border-color: #b9c6ea; box-shadow: 0 6px 18px rgba(37, 71, 208, .10); transform: translateY(-1px); }
#ppilot-analytics-root .ppan-step--red { background: #fffafa; }
#ppilot-analytics-root .ppan-step--blue { background: #fafcff; }
#ppilot-analytics-root .ppan-step--green { background: #fafefc; }
#ppilot-analytics-root .ppan-step--amber { background: #fffdf8; }
#ppilot-analytics-root .ppan-step-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto; }
#ppilot-analytics-root .ppan-step-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
#ppilot-analytics-root .ppan-step-label { color: var(--ppan-ink); font-size: 14.5px; font-weight: 750; line-height: 1.3; }
#ppilot-analytics-root .ppan-step-desc { color: var(--ppan-muted); font-size: 12.5px; line-height: 1.35; }
#ppilot-analytics-root .ppan-step-arrow { color: var(--ppan-royal); }

/* ---- EMPTY / ONBOARD / LOADING / ERROR ---- */
#ppilot-analytics-root .ppan-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 18px 14px; border-radius: 14px; background: var(--ppan-bg); }
#ppilot-analytics-root .ppan-empty-title { color: var(--ppan-ink); font-size: 16px; font-weight: 750; line-height: 1.35; }
#ppilot-analytics-root .ppan-empty-text { color: var(--ppan-muted); font-size: 14px; line-height: 1.55; max-width: 480px; }
#ppilot-analytics-root .ppan-empty .ppan-btn { margin-top: 8px; }
#ppilot-analytics-root .ppan-onboard { margin: 0 0 16px; }
#ppilot-analytics-root .ppan-onboard-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 28px 12px; border-radius: 16px; background: linear-gradient(180deg, #f5f7ff 0%, #ffffff 100%); border: 1px dashed #cdd6e8; }
#ppilot-analytics-root .ppan-onboard-inner .ppan-btn { margin-top: 10px; }
#ppilot-analytics-root .ppan-onboard-icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 18px; background: #eef2ff; color: var(--ppan-royal); margin-bottom: 4px; }
#ppilot-analytics-root .ppan-onboard-icon .ppan-icon { width: 30px; height: 30px; }
#ppilot-analytics-root .ppan-loading,
#ppilot-analytics-root .ppan-error { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 20px; border-radius: var(--ppan-radius); background: var(--ppan-card); border: 1px solid var(--ppan-line); text-align: center; }
#ppilot-analytics-root .ppan-loading-text { color: var(--ppan-body); font-weight: 600; }
#ppilot-analytics-root .ppan-spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #dbe2f0; border-top-color: var(--ppan-royal); animation: ppan-spin .8s linear infinite; }
@keyframes ppan-spin { to { transform: rotate(360deg); } }

/* ---- >= 600px ---- */
@media (min-width: 600px) {
	#ppilot-analytics-root .ppan-hero { padding: 28px; }
	#ppilot-analytics-root .ppan-hero-title { font-size: 32px; }
	#ppilot-analytics-root .ppan-hero-art { display: block; width: 150px; height: 120px; }
	/* v0.57.1 hotfix: same >=0.6 end-stop floor as the mobile/base rule above. */
	/* v0.57.2: same verbatim Dashboard gradient as the base rule above. */
	#ppilot-analytics-root .ppan-hero--image { background-image: linear-gradient(90deg, rgba(7, 15, 34, 0.86) 0%, rgba(9, 24, 54, 0.72) 45%, rgba(11, 31, 69, 0.6) 72%, rgba(11, 31, 69, 0.28) 100%), var(--ppan-hero-desktop, var(--ppan-hero-mobile, none)); }
	#ppilot-analytics-root .ppan-range { width: auto; }
	#ppilot-analytics-root .ppan-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#ppilot-analytics-root .ppan-kpi { padding: 16px 14px; gap: 12px; }
	#ppilot-analytics-root .ppan-kpi-icon { width: 46px; height: 46px; border-radius: 14px; }
	#ppilot-analytics-root .ppan-kpi-value { font-size: 23px; }
}

/* ---- >= 768px ---- */
@media (min-width: 768px) {
	#ppilot-analytics-root .ppan-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
	#ppilot-analytics-root .ppan-ov-body { grid-template-columns: minmax(0, 1fr) 230px; }
	#ppilot-analytics-root .ppan-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#ppilot-analytics-root .ppan-row--2 > .ppan-insights-card { grid-column: 1 / -1; }
	#ppilot-analytics-root .ppan-card { padding: 20px; }
	#ppilot-analytics-root .ppan-area {
		grid-template-columns: 26px minmax(0, 1.4fr) minmax(70px, 1fr) 54px auto;
		grid-template-areas: "rank main bar acc meta";
	}
	#ppilot-analytics-root .ppan-area-rank { align-self: center; }
}

/* ---- >= 1024px ---- */
@media (min-width: 1024px) {
	#ppilot-analytics-root .ppan-hero { padding: 32px 36px; }
	#ppilot-analytics-root .ppan-hero-title { font-size: 36px; }
	#ppilot-analytics-root .ppan-hero-art { width: 190px; height: 150px; margin-right: 12px; }
	#ppilot-analytics-root .ppan-row--1 { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
	#ppilot-analytics-root .ppan-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	#ppilot-analytics-root .ppan-ov-body { grid-template-columns: minmax(0, 1fr); }
}

/* ---- >= 1280px ---- */
@media (min-width: 1280px) {
	#ppilot-analytics-root .ppan-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	#ppilot-analytics-root .ppan-ov-body { grid-template-columns: minmax(0, 1fr) 220px; }
	#ppilot-analytics-root .ppan-row--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, .95fr); }
	#ppilot-analytics-root .ppan-row--2 > .ppan-insights-card { grid-column: auto; }
	#ppilot-analytics-root .ppan-area {
		grid-template-columns: 26px minmax(0, 1fr) auto;
		grid-template-areas: "rank main acc" "rank bar meta";
	}
	#ppilot-analytics-root .ppan-area-rank { align-self: start; }
}

@media (prefers-reduced-motion: reduce) {
	#ppilot-analytics-root *,
	#ppilot-analytics-root *::before,
	#ppilot-analytics-root *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
	#ppilot-analytics-root .ppan-btn--primary:hover,
	#ppilot-analytics-root .ppan-step-link:hover,
	#ppilot-analytics-root a.ppan-insight-link:hover { transform: none; }
}