/* PracticePilot — shared admin design system.
   ROOT-CAUSE FIX (real-WP hardening pass): this file used to live only in
   syllabus.css and was enqueued ONLY on the Syllabus screen. Every other
   admin screen's JS (Blueprint, Exam DNA, Questions, all AI-* screens)
   already used these exact classes (.ppilot-app, .ppilot-btn, .ppilot-
   list-item, .ppilot-badge, .ppilot-input, .ppilot-notice, .ppilot-muted,
   .ppilot-empty, the --ppilot-* color tokens) without ever loading the
   stylesheet that defines them — on any page except Syllabus they rendered
   completely unstyled. That is the actual cause of "status glued to name"
   (missing flex/gap layout) and the generally "raw prototype HTML" look
   reported across multiple screens. Fixed here once, at the root, rather
   than duplicating these rules into every screen's own CSS file.

   Namespaced under .ppilot-app throughout — no bare element selectors,
   safe to load on any wp-admin page without leaking into or being
   affected by other plugins/themes (including Hello Elementor). */

.ppilot-app {
	--ppilot-navy: #1e1b4b;
	--ppilot-navy-light: #312e6b;
	--ppilot-gold: #d97706;
	--ppilot-gold-light: #fef3e2;
	/* §v0.61.2 primary-button-blue: the reference mockups consistently use
	   a solid blue for every primary action button (Add Group, Create
	   Exam, Edit Syllabus, etc.) — sampled directly from the reference
	   image (~#1d6fde/#0b63f0 cluster). Introduced as its OWN token rather
	   than repointing --ppilot-gold, because --ppilot-gold is also the
	   eyebrow/focus-ring/badge accent color used across every page (hero
	   "SYLLABUS MANAGEMENT" label, focus outlines, selected-row highlight,
	   warning badges) — none of that was part of what was asked for, only
	   the primary buttons' own color. */
	--ppilot-primary: #2563eb;
	--ppilot-primary-hover: #1d4ed8;
	--ppilot-primary-active: #1e40af;
	--ppilot-primary-light: #eff6ff;
	--ppilot-ink: #1f2430;
	--ppilot-muted: #6b7280;
	--ppilot-border: #e5e7eb;
	--ppilot-bg: #f9fafb;
	--ppilot-success: #15803d;
	--ppilot-success-bg: #f0fdf4;
	--ppilot-warning: #b45309;
	--ppilot-warning-bg: #fffbeb;
	--ppilot-danger: #b91c1c;
	--ppilot-danger-bg: #fef2f2;
	--ppilot-radius: 8px;
	font-family: -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
	color: var(--ppilot-ink);
	max-width: 1200px;
}

.ppilot-app * { box-sizing: border-box; }

.ppilot-app .ppilot-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 20px;
	margin-top: 16px;
}

.ppilot-app .ppilot-panel {
	background: #fff;
	border: 1px solid var(--ppilot-border);
	border-radius: var(--ppilot-radius);
	padding: 16px;
}

.ppilot-app .ppilot-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.ppilot-app .ppilot-panel-header h2 {
	font-size: 14px;
	margin: 0;
	color: var(--ppilot-navy);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ppilot-app .ppilot-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: 6px;
	border: 1px solid var(--ppilot-border);
	background: #fff;
	color: var(--ppilot-ink);
	padding: 6px 12px;
	font-size: 13px;
	cursor: pointer;
}

.ppilot-app .ppilot-btn:hover { background: var(--ppilot-bg); color: var(--ppilot-ink); }
/* §button-state-hotfix (0.16.1): :hover previously only set `background`,
   never re-declared `color` — a host theme's own generic hover rule
   (e.g. a light-background theme pairing hover with a light/near-white
   text color meant for ITS OWN dark-hover buttons) could win the
   cascade on `color` alone, since nothing here locked it. Every
   interactive state below now explicitly pins BOTH background and
   color together so a theme can never win just one half of the pair.
   Scoped exactly as before — no broad button/a/theme selectors. */
.ppilot-app .ppilot-btn:focus-visible { outline: 2px solid var(--ppilot-gold); outline-offset: 1px; background: var(--ppilot-bg); color: var(--ppilot-ink); }
.ppilot-app .ppilot-btn:active { background: var(--ppilot-border); color: var(--ppilot-ink); }

.ppilot-app .ppilot-btn-primary {
	background: var(--ppilot-primary);
	border-color: var(--ppilot-primary);
	color: #fff;
}

.ppilot-app .ppilot-btn-primary:hover { background: var(--ppilot-primary-hover); border-color: var(--ppilot-primary-hover); color: #fff; }
/* Placed after the shared .ppilot-btn:focus-visible/:active rules above
   so these WIN the specificity tie via source order (both are 3
   class-level selectors: .ppilot-app + .ppilot-btn-primary + the
   pseudo-class) — otherwise a primary button's white text could get
   incorrectly overridden by the default button's ink-colored focus/
   active rule instead of the theme's CSS. */
.ppilot-app .ppilot-btn-primary:focus-visible { outline: 2px solid var(--ppilot-navy); outline-offset: 1px; background: var(--ppilot-primary); color: #fff; }
.ppilot-app .ppilot-btn-primary:active { background: var(--ppilot-primary-active); border-color: var(--ppilot-primary-active); color: #fff; }

.ppilot-app .ppilot-btn-danger {
	color: var(--ppilot-danger);
	border-color: #fecaca;
}

.ppilot-app .ppilot-btn:disabled,
.ppilot-app .ppilot-btn:disabled:hover {
	opacity: 0.5;
	cursor: not-allowed;
	background: #fff;
	color: var(--ppilot-ink);
}
.ppilot-app .ppilot-btn-primary:disabled,
.ppilot-app .ppilot-btn-primary:disabled:hover {
	opacity: 0.5;
	cursor: not-allowed;
	background: var(--ppilot-primary);
	color: #fff;
}

/* Explicit selectable-row pattern (real-WP hardening) — used wherever a whole row/card
   must be one reliable click AND keyboard target, not just an inner text span. */
.ppilot-app .ppilot-list-item,
.ppilot-app .ppilot-selectable-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
}

.ppilot-app .ppilot-list-item:hover,
.ppilot-app .ppilot-selectable-row:hover { background: var(--ppilot-bg); }
.ppilot-app .ppilot-list-item.is-active,
.ppilot-app .ppilot-selectable-row.is-active { background: var(--ppilot-gold-light); font-weight: 600; }
.ppilot-app .ppilot-selectable-row:focus-visible { outline: 2px solid var(--ppilot-gold); outline-offset: -2px; }

.ppilot-app .ppilot-row-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ppilot-app .ppilot-badge {
	display: inline-block;
	flex-shrink: 0;
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 999px;
	font-weight: 600;
	text-transform: capitalize;
}

.ppilot-app .ppilot-badge-draft { background: var(--ppilot-bg); color: var(--ppilot-muted); }
.ppilot-app .ppilot-badge-active { background: var(--ppilot-success-bg); color: var(--ppilot-success); }
.ppilot-app .ppilot-badge-archived { background: var(--ppilot-warning-bg); color: var(--ppilot-warning); }
.ppilot-app .ppilot-badge-pending { background: var(--ppilot-bg); color: var(--ppilot-muted); }
.ppilot-app .ppilot-badge-pending_review { background: var(--ppilot-warning-bg); color: var(--ppilot-warning); }
.ppilot-app .ppilot-badge-approved { background: var(--ppilot-success-bg); color: var(--ppilot-success); }
.ppilot-app .ppilot-badge-rejected { background: var(--ppilot-danger-bg); color: var(--ppilot-danger); }

.ppilot-app .ppilot-input {
	border: 1px solid var(--ppilot-border);
	border-radius: 6px;
	padding: 6px 10px;
	font-size: 13px;
	width: 100%;
}

.ppilot-app .ppilot-input:focus-visible { outline: 2px solid var(--ppilot-gold); outline-offset: 1px; }
.ppilot-app .ppilot-input:disabled { background: var(--ppilot-bg); color: var(--ppilot-muted); cursor: not-allowed; }

/* §premium-ui-sprint: shared select/textarea/checkbox primitives — none
   of these existed as a shared component before (exam-dna.css defined its
   own local .ppilot-textarea only), so this is purely additive; existing
   screens are unaffected until/unless they opt into these classes. */
.ppilot-app .ppilot-select {
	border: 1px solid var(--ppilot-border);
	border-radius: 6px;
	padding: 6px 10px;
	font-size: 13px;
	width: 100%;
	background: #fff;
	color: var(--ppilot-ink);
}
.ppilot-app .ppilot-select:focus-visible { outline: 2px solid var(--ppilot-gold); outline-offset: 1px; }
.ppilot-app .ppilot-select:disabled { background: var(--ppilot-bg); color: var(--ppilot-muted); cursor: not-allowed; }

.ppilot-app .ppilot-textarea {
	border: 1px solid var(--ppilot-border);
	border-radius: 6px;
	padding: 8px 10px;
	font-size: 13px;
	width: 100%;
	font-family: inherit;
	resize: vertical;
	min-height: 80px;
}
.ppilot-app .ppilot-textarea:focus-visible { outline: 2px solid var(--ppilot-gold); outline-offset: 1px; }
.ppilot-app .ppilot-textarea:disabled { background: var(--ppilot-bg); color: var(--ppilot-muted); cursor: not-allowed; }

.ppilot-app .ppilot-checkbox-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	cursor: pointer;
}
.ppilot-app .ppilot-checkbox-label input[type="checkbox"],
.ppilot-app .ppilot-checkbox-label input[type="radio"] {
	width: 16px;
	height: 16px;
	accent-color: var(--ppilot-gold);
	cursor: pointer;
}
.ppilot-app .ppilot-checkbox-label:has(input:disabled) { color: var(--ppilot-muted); cursor: not-allowed; }

.ppilot-app .ppilot-inline-form {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	flex-wrap: wrap;
}

.ppilot-app .ppilot-inline-form .ppilot-input { flex: 1; min-width: 140px; }

.ppilot-app .ppilot-notice {
	padding: 10px 12px;
	border-radius: 6px;
	font-size: 13px;
	margin-bottom: 12px;
}

.ppilot-app .ppilot-notice-error { background: var(--ppilot-danger-bg); color: var(--ppilot-danger); }
.ppilot-app .ppilot-notice-success { background: var(--ppilot-success-bg); color: var(--ppilot-success); }
.ppilot-app .ppilot-notice-locked { background: var(--ppilot-warning-bg); color: var(--ppilot-warning); }

.ppilot-app .ppilot-empty {
	color: var(--ppilot-muted);
	font-size: 13px;
	padding: 12px 0;
}

.ppilot-app .ppilot-muted { color: var(--ppilot-muted); font-size: 12px; }

.ppilot-app .ppilot-spinner {
	display: inline-block;
	width: 12px;
	height: 12px;
	border: 2px solid rgba(0,0,0,0.15);
	border-top-color: var(--ppilot-gold);
	border-radius: 50%;
	animation: ppilot-spin 0.6s linear infinite;
	vertical-align: middle;
}

@keyframes ppilot-spin { to { transform: rotate(360deg); } }

/* Shared modal/dialog (admin/ppilot-modal.js) — replaces native prompt()/
   confirm()/alert() across PracticePilot admin screens. Deliberately
   scoped under .ppilot-modal-* (not .ppilot-app), since the overlay is
   appended to document.body, outside any single screen's root element,
   so it stays theme/Elementor-safe wherever it's triggered from. */

.ppilot-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(17, 24, 39, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	padding: 20px;
}

.ppilot-modal-dialog {
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 20px 40px rgba(0,0,0,.2);
	max-width: 440px;
	width: 100%;
	padding: 24px;
	font-family: -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
}

.ppilot-modal-dialog.is-danger { border-top: 4px solid var(--ppilot-danger); }

.ppilot-modal-title { font-size: 16px; font-weight: 700; color: var(--ppilot-navy); margin: 0 0 10px; }
.ppilot-modal-body { font-size: 13.5px; color: var(--ppilot-ink); line-height: 1.6; margin: 0 0 14px; white-space: pre-line; }
.ppilot-modal-textarea { width: 100%; margin-bottom: 6px; }
.ppilot-modal-error { color: var(--ppilot-danger); font-size: 12px; margin-bottom: 10px; }

.ppilot-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 16px;
}

@media (max-width: 480px) {
	.ppilot-modal-actions { flex-direction: column-reverse; }
	.ppilot-modal-actions .ppilot-btn { width: 100%; }
}

@media (max-width: 782px) {
	.ppilot-app .ppilot-layout { grid-template-columns: 1fr; }
}

/* §source-preview-premium-ui: the "viewer" mode of the SAME shared modal
   (PPilotModal.viewer(), admin/ppilot-modal.js). Deliberately scoped to
   .is-viewer only, so the base .ppilot-modal-dialog rules above (max-width:
   440px — used by every confirm()/prompt() dialog across the whole plugin,
   e.g. delete confirmations) are completely untouched. */
.ppilot-modal-dialog.is-viewer {
	max-width: 1250px;
	width: 94vw;
	height: 86vh;
	max-height: 86vh;
	padding: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.ppilot-modal-viewer-header {
	flex: 0 0 auto;
	padding: 20px 28px 16px;
	border-bottom: 1px solid #e5e7eb;
}
.ppilot-modal-viewer-header-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ppilot-modal-viewer-title { font-size: 18px; font-weight: 700; color: var(--ppilot-navy); margin: 0; }
.ppilot-modal-viewer-close {
	flex: 0 0 auto;
	background: none; border: none; font-size: 24px; line-height: 1; cursor: pointer;
	color: #6b7280; padding: 4px 10px; border-radius: 8px;
}
.ppilot-modal-viewer-close:hover, .ppilot-modal-viewer-close:focus-visible { background: #f3f4f6; color: #111827; }
.ppilot-modal-viewer-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ppilot-modal-viewer-badge {
	font-size: 12px; font-weight: 600; padding: 3px 11px; border-radius: 20px;
	background: #f3f4f6; color: #374151; white-space: nowrap;
}
.ppilot-modal-viewer-badge.is-type { background: #fee2e2; color: #b91c1c; }
.ppilot-modal-viewer-badge.is-ready { background: #dcfce7; color: #15803d; }
.ppilot-modal-viewer-badge.is-processing { background: #fef3c7; color: #b45309; }
.ppilot-modal-viewer-badge.is-failed { background: #fee2e2; color: #b91c1c; }
.ppilot-modal-viewer-badge.is-pending { background: #f3f4f6; color: #6b7280; }
.ppilot-modal-viewer-badge.is-method { background: #dbeafe; color: #1d4ed8; }
.ppilot-modal-viewer-badge.is-count { background: #ede9fe; color: #6d28d9; }
.ppilot-modal-viewer-meta { margin-top: 8px; font-size: 12.5px; color: #6b7280; }

.ppilot-modal-viewer-body { flex: 1 1 auto; display: flex; min-height: 0; overflow: hidden; }

.ppilot-modal-viewer-nav {
	flex: 0 0 230px; max-width: 230px;
	border-right: 1px solid #e5e7eb; overflow-y: auto; padding: 14px 10px;
	background: #fafafa;
}
/* Single-chunk sources (e.g. a short pasted note) have nothing to navigate
   -- openSourcePreview() leaves navEl empty rather than fabricating a
   one-item list, and this hides the now-empty sidebar column entirely. */
.ppilot-modal-viewer-nav:empty { display: none; border-right: none; padding: 0; }
.ppilot-viewer-nav-heading { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #9ca3af; padding: 4px 10px 10px; }
.ppilot-viewer-nav-search {
	width: 100%; box-sizing: border-box; font-size: 13px; padding: 7px 10px; margin-bottom: 10px;
	border: 1px solid #e5e7eb; border-radius: 8px;
}
.ppilot-viewer-nav-item {
	display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
	font-size: 13.5px; color: #374151; padding: 8px 10px; border-radius: 8px; margin-bottom: 2px;
}
.ppilot-viewer-nav-item:hover { background: #f0f0f1; }
.ppilot-viewer-nav-item.is-active { background: var(--ppilot-primary, #2563eb); color: #fff; font-weight: 600; }
.ppilot-viewer-nav-item.is-hidden { display: none; }
.ppilot-viewer-nav-empty { font-size: 13px; color: #9ca3af; padding: 8px 10px; }

/*
 * §source-preview-doc-outline (v0.62.6): the real two-level document-outline
 * nav (renderContinuousDocument()'s navList) -- depth-1 items ("I. SOCIAL
 * SCIENCE") at the base indent, depth-2 items ("1. HISTORY") nested under
 * them. Only ever built from headings parseStructuredBlocks() genuinely
 * found; the fallback per-chunk nav above is unchanged.
 */
.ppilot-viewer-nav-list { display: flex; flex-direction: column; }
.ppilot-viewer-nav-item-depth-1 { font-weight: 700; color: #111827; margin-top: 10px; }
.ppilot-viewer-nav-item-depth-1:first-child { margin-top: 0; }
.ppilot-viewer-nav-item-depth-1.is-active { font-weight: 700; }
.ppilot-viewer-nav-item-depth-2 { padding-left: 22px; font-size: 13px; color: #4b5563; }

.ppilot-modal-viewer-content { flex: 1 1 auto; overflow-y: auto; padding: 28px 36px; min-width: 0; }
.ppilot-viewer-section { margin-bottom: 30px; scroll-margin-top: 12px; }
.ppilot-viewer-section-label {
	display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .03em;
	color: #fff; background: var(--ppilot-primary, #2563eb); padding: 3px 12px; border-radius: 20px; margin-bottom: 12px;
}
.ppilot-viewer-section-text {
	font-size: 15.5px; line-height: 1.78; color: #1f2937;
	overflow-wrap: anywhere;
	max-width: 900px;
}
.ppilot-viewer-section-text p { margin: 0 0 16px; }
.ppilot-viewer-section-text p:last-child { margin-bottom: 0; }
.ppilot-viewer-section-text mark { background: #fde68a; border-radius: 3px; padding: 0 2px; }

/*
 * §source-preview-doc-formatting (v0.62.5): structural elements produced by
 * parseStructuredBlocks()/renderStructuredContent() in ai-sources.js. These
 * are PRESENTATION ONLY -- every heading/list-item/page-break below wraps
 * text that was already in the extracted chunk; nothing here adds, removes
 * or rewrites a single word of the source.
 */
.ppilot-viewer-heading {
	margin: 22px 0 10px; font-weight: 700; color: var(--ppilot-navy, #111827);
	display: flex; align-items: baseline; gap: 8px;
}
.ppilot-viewer-section-text > .ppilot-viewer-heading:first-child { margin-top: 0; }
.ppilot-viewer-heading-1 { font-size: 18px; padding-bottom: 6px; border-bottom: 1px solid #e5e7eb; }
.ppilot-viewer-heading-2 { font-size: 16.5px; margin-left: 6px; }
.ppilot-viewer-heading-3 { font-size: 15.5px; font-weight: 600; margin-left: 18px; color: #374151; }
.ppilot-viewer-heading-marker {
	flex: 0 0 auto; color: var(--ppilot-primary, #2563eb); font-weight: 700;
}
.ppilot-viewer-heading-text mark, .ppilot-viewer-list-text mark { background: #fde68a; border-radius: 3px; padding: 0 2px; }

.ppilot-viewer-list-item {
	display: flex; align-items: baseline; gap: 8px;
	margin: 0 0 10px; margin-left: 30px; line-height: 1.75; font-size: 15.5px;
}
.ppilot-viewer-list-marker { flex: 0 0 auto; color: #6b7280; font-weight: 600; }
.ppilot-viewer-list-text { color: #1f2937; overflow-wrap: anywhere; }

.ppilot-viewer-page-break {
	display: flex; align-items: center; gap: 10px;
	margin: 26px 0 18px; color: #9ca3af;
}
.ppilot-viewer-page-break::before, .ppilot-viewer-page-break::after {
	content: ''; flex: 1 1 auto; height: 1px; background: #e5e7eb;
}
.ppilot-viewer-page-break-label {
	flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .05em;
	text-transform: uppercase; color: #9ca3af;
}
.ppilot-viewer-empty { padding: 40px 10px; text-align: center; color: #6b7280; font-size: 14px; }
.ppilot-viewer-error-box {
	background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 10px;
	padding: 14px 16px; font-size: 13.5px; line-height: 1.6; margin-bottom: 20px;
}

@media (max-width: 1024px) {
	.ppilot-modal-dialog.is-viewer { width: 95vw; }
	.ppilot-modal-viewer-nav { flex-basis: 190px; max-width: 190px; }
	.ppilot-modal-viewer-content { padding: 22px; }
}

@media (max-width: 782px) {
	.ppilot-modal-overlay:has(.is-viewer) { padding: 10px; }
	.ppilot-modal-dialog.is-viewer { width: 100%; height: 92vh; max-height: 92vh; border-radius: 10px; }
	.ppilot-modal-viewer-header { padding: 16px 16px 12px; }
	.ppilot-modal-viewer-title { font-size: 16px; }
	.ppilot-modal-viewer-body { flex-direction: column; }
	.ppilot-modal-viewer-nav {
		flex: 0 0 auto; max-width: none; max-height: 130px;
		border-right: none; border-bottom: 1px solid #e5e7eb;
	}
	.ppilot-modal-viewer-content { padding: 16px; }
	.ppilot-viewer-section-text { font-size: 14.5px; line-height: 1.65; }
	.ppilot-viewer-heading-1 { font-size: 16.5px; }
	.ppilot-viewer-heading-2 { font-size: 15px; margin-left: 2px; }
	.ppilot-viewer-heading-3 { font-size: 14.5px; margin-left: 12px; }
	.ppilot-viewer-list-item { margin-left: 18px; font-size: 14.5px; }
}

/* §ai-sources-upload-feedback (v0.62.0): shared toast/notification
   component (admin/ppilot-toast.js, window.PPilotToast) — same global-
   component convention as the .ppilot-modal-* rules above. Fixed-position
   stack, top-right on desktop, full-width at the bottom on narrow/mobile
   viewports so it never covers a form field a user is actively using. */
.ppilot-toast-stack {
	position: fixed;
	top: 32px;
	right: 20px;
	z-index: 100001;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 380px;
	width: calc(100% - 40px);
}

.ppilot-toast {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: #fff;
	border: 1px solid var(--ppilot-border);
	border-left: 4px solid var(--ppilot-muted);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(16,24,40,.12);
	padding: 12px 14px;
	font-family: -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
	animation: ppilot-toast-in .18s ease-out;
}
@keyframes ppilot-toast-in {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: translateY(0); }
}

.ppilot-toast.is-success { border-left-color: var(--ppilot-success); }
.ppilot-toast.is-error   { border-left-color: var(--ppilot-danger); }
.ppilot-toast.is-processing { border-left-color: var(--ppilot-primary, #2563eb); }
.ppilot-toast.is-info    { border-left-color: var(--ppilot-primary, #2563eb); }

.ppilot-toast-icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; }
.ppilot-toast-icon svg { width: 20px; height: 20px; display: block; }
.ppilot-toast.is-success .ppilot-toast-icon { color: var(--ppilot-success); }
.ppilot-toast.is-error .ppilot-toast-icon { color: var(--ppilot-danger); }
.ppilot-toast.is-processing .ppilot-toast-icon,
.ppilot-toast.is-info .ppilot-toast-icon { color: var(--ppilot-primary, #2563eb); }
.ppilot-toast-icon.is-spin svg { animation: ppilot-toast-spin 1.1s linear infinite; }
@keyframes ppilot-toast-spin { to { transform: rotate(360deg); } }

.ppilot-toast-body { flex: 1; min-width: 0; }
.ppilot-toast-title { font-size: 13.5px; font-weight: 700; color: var(--ppilot-navy); line-height: 1.35; }
.ppilot-toast-message { font-size: 12.5px; color: var(--ppilot-muted); line-height: 1.45; margin-top: 2px; }

.ppilot-toast-close {
	flex-shrink: 0;
	border: none;
	background: none;
	color: var(--ppilot-muted);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	padding: 2px 4px;
	border-radius: 4px;
}
.ppilot-toast-close:hover { background: var(--ppilot-bg); color: var(--ppilot-navy); }

@media (max-width: 600px) {
	.ppilot-toast-stack { top: auto; bottom: 16px; right: 16px; left: 16px; width: auto; max-width: none; }
}

/* v0.70.0 (§bulk-review-actions): shared bulk-select / bulk-action bar —
   used by Question Bank (admin/questions.js) and AI Review Queue
   (admin/ai-review.js). Reuses the EXISTING --ppilot-navy/--ppilot-gold/
   --ppilot-primary/--ppilot-border tokens above, matching the premium
   dark-navy/gold visual language rather than inventing a new palette. */
.ppilot-app .ppilot-bulk-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	padding: 10px 14px;
	margin-bottom: 10px;
	background: var(--ppilot-navy);
	border-radius: 10px;
	color: #fff;
}
.ppilot-app .ppilot-bulk-selectall {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #e5e7eb;
	cursor: pointer;
	user-select: none;
}
.ppilot-app .ppilot-bulk-selectall input[type="checkbox"] { accent-color: var(--ppilot-gold); width: 15px; height: 15px; cursor: pointer; }
.ppilot-app .ppilot-bulk-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ppilot-app .ppilot-bulk-count {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ppilot-navy);
	background: var(--ppilot-gold-light);
	border-radius: 999px;
	padding: 4px 10px;
	margin-right: 2px;
}
.ppilot-app .ppilot-bulk-actions .ppilot-btn { padding: 6px 12px; font-size: 12.5px; }
.ppilot-app .ppilot-bulk-clear { opacity: 0.85; }
.ppilot-app .ppilot-qb-row-checkbox,
.ppilot-app .ppilot-review-list-checkbox {
	accent-color: var(--ppilot-gold);
	width: 15px;
	height: 15px;
	cursor: pointer;
	margin-right: 6px;
	flex-shrink: 0;
}

.ppilot-app .ppilot-bulk-progress { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 220px; }
.ppilot-app .ppilot-bulk-progress-label { font-size: 12.5px; font-weight: 600; color: #e5e7eb; white-space: nowrap; }
.ppilot-app .ppilot-bulk-progress-track {
	flex: 1;
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	overflow: hidden;
}
.ppilot-app .ppilot-bulk-progress-fill {
	height: 100%;
	background: var(--ppilot-gold);
	border-radius: 999px;
	transition: width 0.25s ease;
}