/**
 * Podify Portal Lite — customer styles.
 *
 * Two components carry this MVP: the sign-in card and the progress tracker.
 * Both are ported unchanged from the full Service Portal so the two products
 * look like one, and so a site that later upgrades sees no visual break.
 */

/* Defensive: a class's own `display` rule can otherwise win the cascade
   over the browser's default [hidden] behavior (both are equal
   specificity, so whichever comes later in source order wins) — this
   guarantees hidden actually means hidden for every button/element in
   this stylesheet regardless of what else targets it. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

.ppl {
	--ppl-brand: #5b3df5;
	--ppl-brand-soft: #ede9ff;
	--ppl-ink: #111827;
	--ppl-muted: #6b7280;
	--ppl-faint: #9ca3af;
	--ppl-line: #e5e7eb;
	--ppl-surface: #ffffff;
	--ppl-canvas: #f4f5fa;
	--ppl-success: #16a34a;
	--ppl-success-soft: #dcfce7;
	--ppl-warn: #b45309;
	--ppl-warn-soft: #fef3c7;
	--ppl-danger: #dc2626;
	--ppl-radius: 14px;
	--ppl-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);

	box-sizing: border-box;
	color: var(--ppl-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.ppl *,
.ppl *::before,
.ppl *::after { box-sizing: inherit; }

/* ==========================================================================
   Page shell
   ========================================================================== */

.ppl-page {
	background: var(--ppl-canvas);
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	min-height: 100vh;
	padding: 32px 24px 56px;
	width: 100vw;
}

.ppl-wrap { margin: 0 auto; max-width: 980px; }

.ppl-head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	margin-bottom: 26px;
}

.ppl-head__title {
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: -.025em;
	margin: 0;
}

.ppl-head__subtitle { color: var(--ppl-muted); margin: 4px 0 0; }

.ppl-head__aside { align-items: center; display: flex; gap: 12px; }

.ppl-avatar {
	align-items: center;
	background: var(--ppl-brand);
	border-radius: 50%;
	color: #fff;
	display: flex;
	font-size: .85rem;
	font-weight: 700;
	height: 38px;
	justify-content: center;
	width: 38px;
}

.ppl-signout {
	color: var(--ppl-muted);
	font-size: .88rem;
	text-decoration: none;
}

.ppl-signout:hover { color: var(--ppl-ink); }

/* ==========================================================================
   Deliverable cards
   ========================================================================== */

.ppl-list { display: grid; gap: 18px; }

.ppl-card {
	background: var(--ppl-surface);
	border: 1px solid var(--ppl-line);
	border-radius: var(--ppl-radius);
	box-shadow: var(--ppl-shadow);
	padding: 22px 24px;
}

.ppl-card__head {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
}

.ppl-card__title { font-size: 1.1rem; font-weight: 700; margin: 0; }

.ppl-card__service {
	background: var(--ppl-brand-soft);
	border-radius: 999px;
	color: var(--ppl-brand);
	display: inline-block;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .04em;
	margin-top: 6px;
	padding: 3px 10px;
	text-transform: uppercase;
}

.ppl-card__meta {
	color: var(--ppl-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: .84rem;
	gap: 18px;
	margin-top: 14px;
}

.ppl-card__meta strong { color: var(--ppl-ink); display: block; font-weight: 600; }

.ppl-card__meta span { display: block; }

.ppl-stage {
	background: var(--ppl-canvas);
	border: 1px solid var(--ppl-line);
	border-radius: 12px;
	margin-top: 16px;
	padding: 14px 16px;
}

.ppl-stage__label {
	color: var(--ppl-muted);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	margin: 0;
	text-transform: uppercase;
}

.ppl-stage__value { font-size: 1.05rem; font-weight: 700; margin: 4px 0 0; }
.ppl-stage__note { color: var(--ppl-muted); margin: 4px 0 0; }

.ppl-empty {
	background: var(--ppl-surface);
	border: 1px dashed var(--ppl-line);
	border-radius: var(--ppl-radius);
	color: var(--ppl-muted);
	padding: 44px 24px;
	text-align: center;
}

.ppl-empty__title { color: var(--ppl-ink); font-size: 1.1rem; margin: 0 0 6px; }

/* ==========================================================================
   Forms, buttons, alerts
   ========================================================================== */

.ppl-form { display: grid; gap: 14px; }

.ppl-field { display: block; }

.ppl-field__label {
	display: block;
	font-size: .84rem;
	font-weight: 600;
	margin-bottom: 6px;
}

.ppl-field input {
	background: var(--ppl-surface);
	border: 1px solid var(--ppl-line);
	border-radius: 10px;
	color: var(--ppl-ink);
	font: inherit;
	padding: 11px 13px;
	width: 100%;
}

.ppl-btn {
	background: var(--ppl-brand);
	border: 1px solid transparent;
	border-radius: 10px;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font: inherit;
	font-weight: 600;
	padding: 11px 18px;
	text-align: center;
	text-decoration: none;
}

.ppl-btn--block { display: block; width: 100%; }

.ppl-alert {
	border-radius: 10px;
	margin-bottom: 16px;
	padding: 11px 14px;
}

.ppl-alert--error { background: #fee2e2; color: #991b1b; }
.ppl-alert--ok { background: var(--ppl-success-soft); color: #14532d; }

.ppl-checkbox { align-items: center; display: flex; gap: 8px; }

/* ==========================================================================
   Auth screens — one rounded card: light brand panel, dark form panel
   ========================================================================== */

.ppl-auth-shell {
	align-items: center;
	display: flex;
	justify-content: center;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	min-height: 100vh;
	padding: 26px;
	width: 100vw;
}

.ppl-auth-card {
	border-radius: 26px;
	box-shadow: 0 30px 60px -30px rgba(9, 12, 20, .28);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	max-width: 1180px;
	min-height: min(780px, calc(100vh - 52px));
	overflow: hidden;
	width: 100%;
}

@media (min-width: 900px) {
	.ppl-auth-card {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	}
}

/* ---------- Brand panel ---------- */

.ppl-auth-brand {
	background-color: #eef4f8;
	/* Cyan bloom over a fine dot grid — the texture is drawn, not an image,
	   so nothing extra is requested over the network. */
	background-image:
		radial-gradient(38% 34% at 26% 20%, rgba(56, 189, 248, .55) 0%, rgba(56, 189, 248, 0) 70%),
		radial-gradient(32% 30% at 62% 52%, rgba(45, 212, 191, .58) 0%, rgba(45, 212, 191, 0) 72%),
		radial-gradient(rgba(15, 23, 42, .10) 1px, transparent 1px),
		linear-gradient(160deg, #f4f9fc 0%, #e9f1f6 100%);
	background-size: auto, auto, 14px 14px, auto;
	color: #0b1220;
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 38px 40px 44px;
}

.ppl-auth-brand__top {
	align-items: center;
	display: flex;
	gap: 14px;
}

.ppl-auth-brand__mark {
	align-items: center;
	background: #0b1220;
	border-radius: 14px;
	color: #fff;
	display: flex;
	flex: 0 0 52px;
	font-size: 1.4rem;
	font-weight: 700;
	height: 52px;
	justify-content: center;
	width: 52px;
}

.ppl-auth-brand__name {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.15;
}

/* Wide enough that the headline breaks into phrases rather than stacking one
   word per line, which is what 15ch did at this type size. */
.ppl-auth-brand__copy {
	margin-top: auto;
	max-width: 22ch;
}

.ppl-auth-brand__eyebrow {
	color: #64748b;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .16em;
	margin: 0 0 14px;
	text-transform: uppercase;
}

.ppl-auth-brand__headline {
	color: #0b1220;
	font-size: clamp(2.1rem, 3.4vw, 3.2rem);
	font-weight: 800;
	letter-spacing: -.035em;
	line-height: .96;
	margin: 0 0 18px;
}

.ppl-auth-brand__body {
	color: #475569;
	font-size: .95rem;
	margin: 0;
	max-width: 34ch;
}

/* On narrow screens the brand panel becomes a compact header. */
@media (max-width: 899px) {
	.ppl-auth-shell { padding: 0; }

	.ppl-auth-card {
		border-radius: 0;
		box-shadow: none;
		min-height: 100vh;
	}

	.ppl-auth-brand {
		gap: 26px;
		padding: 26px 22px 30px;
	}

	.ppl-auth-brand__copy { margin-top: 0; max-width: none; }
	.ppl-auth-brand__headline { font-size: 2rem; }
	.ppl-auth-brand__body { display: none; }
}

/* ---------- Dark form panel ---------- */

.ppl-auth-panel {
	background: #0a0a0b;
	color: #fff;
	display: flex;
	padding: 48px 44px;
}

.ppl-auth {
	margin: auto;
	max-width: 400px;
	width: 100%;
}

.ppl-auth__title {
	color: #fff;
	font-size: clamp(2rem, 3.4vw, 2.7rem);
	font-weight: 800;
	letter-spacing: -.035em;
	line-height: 1.05;
	margin: 0 0 8px;
}

.ppl-auth__subtitle {
	color: #9ca3af;
	font-size: .95rem;
	margin: 0 0 26px;
}

/* Fields are placeholder-led to match the reference; the label is still in
   the markup for screen readers and autofill. */
.ppl-auth .ppl-field { margin-bottom: 12px; }

.ppl-auth .ppl-field__label {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.ppl-auth .ppl-field input,
.ppl-auth .ppl-field select,
.ppl-auth .ppl-field textarea {
	background: #17181a;
	border: 1px solid #26272b;
	border-radius: 11px;
	color: #fff;
	font-size: .95rem;
	padding: 14px 16px;
}

.ppl-auth .ppl-field input::placeholder,
.ppl-auth .ppl-field textarea::placeholder { color: #6b7280; }

.ppl-auth .ppl-field input:focus,
.ppl-auth .ppl-field select:focus,
.ppl-auth .ppl-field textarea:focus {
	background: #1c1d20;
	border-color: #3f3f46;
	box-shadow: none;
	outline: 2px solid rgba(124, 108, 255, .55);
	outline-offset: 1px;
}

.ppl-auth .ppl-field__hint { color: #6b7280; }

.ppl-auth .ppl-form__row { gap: 12px; }

.ppl-auth .ppl-checkbox {
	color: #e5e7eb;
	font-size: .9rem;
	margin: 4px 0 18px;
}

.ppl-auth .ppl-checkbox input { accent-color: #7c6cff; }

/* The primary action is white-on-black here, inverted from the app. */
.ppl-btn--light,
.ppl-auth .ppl-btn--block {
	background: #fff;
	border-color: #fff;
	border-radius: 11px;
	color: #0a0a0b;
	font-weight: 600;
	padding: 14px 18px;
}

.ppl-btn--light:hover,
.ppl-auth .ppl-btn--block:hover {
	background: #ececed;
	color: #0a0a0b;
	opacity: 1;
}

.ppl-auth .ppl-btn--ghost {
	background: transparent;
	border-color: #2c2d31;
	color: #e5e7eb;
}

.ppl-auth .ppl-btn--ghost:hover { color: #fff; }

/* Stated through .ppl-auth so a theme's own `a` colour cannot claim these —
   the sign-in panel is near-black and a theme accent can be unreadable on it. */
.ppl-auth a.ppl-auth__link,
.ppl-auth a.ppl-auth__link:visited { color: #fff; }

.ppl-auth .ppl-auth__alt a,
.ppl-auth .ppl-auth__alt a:visited { color: #8b7cff; }

.ppl-auth__link {
	background: none;
	border: 0;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font: inherit;
	font-size: .88rem;
	font-weight: 600;
	margin-top: 16px;
	padding: 0;
	text-decoration: none;
}

.ppl-auth__link:hover { color: #fff; text-decoration: underline; }

.ppl-auth__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.ppl-auth__fineprint {
	color: #6b7280;
	font-size: .82rem;
	margin: 14px 0 0;
	text-align: center;
}

.ppl-auth__alt {
	color: #9ca3af;
	font-size: .9rem;
	margin: 30px 0 0;
	text-align: center;
}

.ppl-auth__alt a {
	color: #8b7cff;
	font-weight: 600;
	text-decoration: none;
}

.ppl-auth__alt a:hover { text-decoration: underline; }

/* Alerts need to read on the dark panel. */
.ppl-auth .ppl-alert {
	border: 0;
	font-size: .88rem;
	margin-bottom: 18px;
}

.ppl-auth .ppl-alert--success { background: rgba(22, 163, 74, .16); color: #86efac; }
.ppl-auth .ppl-alert--error { background: rgba(220, 38, 38, .16); color: #fca5a5; }
.ppl-auth .ppl-alert--info { background: rgba(124, 108, 255, .16); color: #c4b5fd; }

@media (max-width: 899px) {
	.ppl-auth-panel { padding: 34px 22px 46px; }
}

/* ==========================================================================
   Order detail, timeline, meta (orders view)
   ========================================================================== */

.ppl-back {
	color: var(--ppl-muted);
	display: inline-block;
	font-size: .88rem;
	margin-bottom: 12px;
	text-decoration: none;
}

.ppl-order-detail__title {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.02em;
	margin: 0;
}

.ppl-order-detail__subtitle { color: var(--ppl-muted); margin: 3px 0 0; }

.ppl-order-detail__id {
	color: var(--ppl-faint);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .82rem;
	margin: 6px 0 0;
}

.ppl-meta {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	margin: 0 0 20px;
}

.ppl-meta dt {
	color: var(--ppl-faint);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.ppl-meta dd { font-weight: 700; margin: 4px 0 0; }

.ppl-timeline { list-style: none; margin: 0; padding: 0; }

.ppl-timeline__item {
	border-left: 2px solid var(--ppl-line);
	padding: 0 0 16px 18px;
	position: relative;
}

.ppl-timeline__item::before {
	background: var(--ppl-brand);
	border-radius: 50%;
	content: "";
	height: 9px;
	left: -5.5px;
	position: absolute;
	top: 6px;
	width: 9px;
}

.ppl-timeline__item:last-child { border-left-color: transparent; padding-bottom: 0; }
.ppl-timeline__label { font-weight: 600; }

.ppl-timeline__time {
	color: var(--ppl-muted);
	display: block;
	font-size: .8rem;
}

/* ---------- Tracker ----------
   Chevrons rather than dots on a rail: the arrow carries direction, so the
   sequence reads as a pipeline at a glance. Each stage owns a colour, and the
   stage in progress carries a slow sheen — motion is the cue that something is
   happening right now, which a static fill cannot say. Colour and motion are
   both redundant: every step also states its state in text for screen readers,
   and the sheen is dropped entirely under prefers-reduced-motion.
   -------------------------------------------------------------------------- */

.ppl {
	--ppl-stage-0: #5b3df5;
	--ppl-stage-1: #0ea5e9;
	--ppl-stage-2: #14b8a6;
	--ppl-stage-3: #f59e0b;
	--ppl-stage-4: #ec4899;
	--ppl-stage-5: #8b5cf6;
	--ppl-stage-6: #06b6d4;
	--ppl-stage-7: #22c55e;
}

.ppl-tracker { margin: 26px 0 18px; }

.ppl-tracker__steps {
	display: flex;
	flex-wrap: nowrap;
	gap: 4px;
	list-style: none;
	margin: 0;
	overflow-x: auto;
	padding: 0 0 4px;
}

.ppl-tracker__step {
	flex: 1 1 0;
	min-width: 116px;
	position: relative;
	text-align: center;
}

.ppl-tracker__chev {
	--ppl-notch: 16px;

	align-items: center;
	background: var(--ppl-line);
	clip-path: polygon(
		0 0,
		calc(100% - var(--ppl-notch)) 0,
		100% 50%,
		calc(100% - var(--ppl-notch)) 100%,
		0 100%,
		var(--ppl-notch) 50%
	);
	color: var(--ppl-muted);
	display: flex;
	gap: 6px;
	justify-content: center;
	min-height: 44px;
	overflow: hidden;
	padding: 10px calc(var(--ppl-notch) + 8px);
	position: relative;
}

/* The first step has no incoming arrow to receive, and the last no outgoing. */
.ppl-tracker__step:first-child .ppl-tracker__chev {
	clip-path: polygon(0 0, calc(100% - var(--ppl-notch)) 0, 100% 50%, calc(100% - var(--ppl-notch)) 100%, 0 100%);
	border-radius: 8px 0 0 8px;
}

.ppl-tracker__step:last-child .ppl-tracker__chev {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--ppl-notch) 50%);
	border-radius: 0 8px 8px 0;
}

.ppl-tracker__step:only-child .ppl-tracker__chev {
	border-radius: 8px;
	clip-path: none;
}

.ppl-tracker__label {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.2;
	text-transform: uppercase;
}

.ppl-tracker__tick {
	flex: 0 0 13px;
	height: 13px;
	width: 13px;
}

.ppl-tracker__tick svg { display: block; height: 13px; width: 13px; }

/* Done: the stage's own colour, held. */
.ppl-tracker__step.is-completed .ppl-tracker__chev {
	background: var(--ppl-step, var(--ppl-brand));
	color: #fff;
}

/* In progress: the same colour, lit, with the sheen crossing it. */
.ppl-tracker__step.is-active .ppl-tracker__chev {
	background: var(--ppl-step, var(--ppl-brand));
	box-shadow: 0 6px 18px -8px var(--ppl-step, var(--ppl-brand));
	color: #fff;
}

.ppl-tracker__step.is-active .ppl-tracker__chev::after {
	animation: ppl-sheen 2.4s ease-in-out infinite;
	background: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0) 20%,
		rgba(255, 255, 255, .48) 50%,
		rgba(255, 255, 255, 0) 80%
	);
	bottom: 0;
	content: "";
	left: -60%;
	position: absolute;
	top: 0;
	width: 55%;
}

@keyframes ppl-sheen {
	0%   { left: -60%; }
	60%  { left: 115%; }
	100% { left: 115%; }
}

.ppl-tracker__step.is-pending .ppl-tracker__chev {
	background: var(--ppl-line);
	color: var(--ppl-faint);
}

.ppl-tracker__meta {
	color: var(--ppl-faint);
	display: block;
	font-size: .7rem;
	margin-top: 5px;
	min-height: 1em;
}

/* State text stays available to screen readers; colour is never the only cue. */
.ppl-tracker__state {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

@media (prefers-reduced-motion: reduce) {
	.ppl-tracker__step.is-active .ppl-tracker__chev::after { animation: none; opacity: .25; }
}

@media (max-width: 640px) {
	.ppl-tracker__steps { flex-direction: column; gap: 6px; overflow-x: visible; }
	.ppl-tracker__step { min-width: 0; text-align: left; }

	/* Arrows point down the page once the row stacks, so the notch is dropped
	   rather than left pointing sideways into nothing. */
	.ppl-tracker__chev,
	.ppl-tracker__step:first-child .ppl-tracker__chev,
	.ppl-tracker__step:last-child .ppl-tracker__chev {
		border-radius: 9px;
		clip-path: none;
		justify-content: flex-start;
		min-height: 0;
		padding: 10px 14px;
	}

	.ppl-tracker__meta { margin: 3px 0 0 14px; }
}


/* ==========================================================================
   Staff queue
   ========================================================================== */

.ppl-wrap--wide { max-width: 1240px; }

.ppl-who { line-height: 1.2; }
.ppl-who strong { display: block; font-size: .9rem; font-weight: 600; }
.ppl-who small { color: var(--ppl-muted); font-size: .76rem; }

.ppl-btn--quiet {
	background: var(--ppl-surface);
	border-color: var(--ppl-line);
	color: var(--ppl-ink);
	font-size: .86rem;
	padding: 9px 14px;
}

.ppl-btn--quiet:hover { border-color: var(--ppl-brand); color: var(--ppl-brand); }

.ppl-stats {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	margin-bottom: 22px;
}

.ppl-stat {
	background: var(--ppl-surface);
	border: 1px solid var(--ppl-line);
	border-radius: var(--ppl-radius);
	box-shadow: var(--ppl-shadow);
	padding: 16px 18px;
}

.ppl-stat.is-warn { background: var(--ppl-warn-soft); border-color: #fcd34d; }

.ppl-stat__label {
	color: var(--ppl-muted);
	display: block;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ppl-stat__value {
	display: block;
	font-size: 1.9rem;
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.15;
	margin-top: 4px;
}

.ppl-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

.ppl-filter {
	align-items: center;
	background: var(--ppl-surface);
	border: 1px solid var(--ppl-line);
	border-radius: 999px;
	color: var(--ppl-muted);
	display: inline-flex;
	font-size: .85rem;
	font-weight: 600;
	gap: 7px;
	padding: 7px 14px;
	text-decoration: none;
}

.ppl-filter.is-active {
	background: var(--ppl-brand);
	border-color: var(--ppl-brand);
	color: #fff;
}

.ppl-filter__count {
	background: var(--ppl-canvas);
	border-radius: 999px;
	color: var(--ppl-muted);
	font-size: .72rem;
	padding: 1px 7px;
}

.ppl-filter.is-active .ppl-filter__count { background: rgba(255, 255, 255, .22); color: #fff; }

.ppl-queue { display: grid; gap: 16px; }

.ppl-card__client { color: var(--ppl-muted); font-size: .88rem; margin: 4px 0 0; }

.ppl-flag { color: var(--ppl-danger); font-weight: 600; }

.ppl-inline { align-items: center; display: flex; gap: 8px; }

.ppl-inline select {
	background: var(--ppl-surface);
	border: 1px solid var(--ppl-line);
	border-radius: 9px;
	font: inherit;
	font-size: .86rem;
	padding: 8px 10px;
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}


/* ==========================================================================
   Premium client dashboard
   ========================================================================== */

.ppl-client-dashboard {
	--ppl-client-bg: #070712;
	--ppl-client-panel: rgba(21, 19, 48, .62);
	--ppl-client-panel-strong: rgba(28, 24, 62, .78);
	--ppl-client-line: rgba(255, 255, 255, .10);
	--ppl-client-text: #f8f7ff;
	--ppl-client-muted: #a7a3bd;
	--ppl-client-accent: #f09;
	--ppl-client-accent-2: #8b5cf6;
	--ppl-client-blue: #38bdf8;
	background:
		radial-gradient(circle at 84% 8%, rgba(240, 0, 153, .20), transparent 24%),
		radial-gradient(circle at 58% 48%, rgba(124, 92, 246, .16), transparent 30%),
		linear-gradient(135deg, #070712 0%, #0b0a1c 45%, #100a21 100%);
	color: var(--ppl-client-text);
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	min-height: 100vh;
	overflow: hidden;
	padding: 0;
	width: 100vw;
}

.ppl-client-shell {
	display: grid;
	grid-template-columns: 245px minmax(0, 1fr);
	min-height: 100vh;
}

.ppl-client-sidebar {
	background: rgba(7, 7, 18, .68);
	border-right: 1px solid var(--ppl-client-line);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	display: flex;
	flex-direction: column;
	padding: 28px 18px;
	position: relative;
	z-index: 2;
}

.ppl-client-sidebar::before {
	background: radial-gradient(circle, rgba(240, 0, 153, .22), transparent 68%);
	content: "";
	height: 240px;
	left: -100px;
	position: absolute;
	top: 40%;
	width: 240px;
}

.ppl-client-brand {
	align-items: center;
	display: flex;
	gap: 12px;
	padding: 4px 10px 38px;
	position: relative;
}

.ppl-client-brand__mark {
	align-items: center;
	background: linear-gradient(135deg, #f09, #8b5cf6 65%, #38bdf8);
	border-radius: 13px;
	box-shadow: 0 10px 30px rgba(240, 0, 153, .24);
	color: #fff;
	display: flex;
	font-size: 1.35rem;
	font-weight: 800;
	height: 44px;
	justify-content: center;
	width: 44px;
}

.ppl-client-brand strong {
	display: block;
	font-size: 1.18rem;
	letter-spacing: -.03em;
}

.ppl-client-brand span:not(.ppl-client-brand__mark) {
	color: var(--ppl-client-muted);
	display: block;
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .16em;
	margin-top: 2px;
	text-transform: uppercase;
}

.ppl-client-nav { display: grid; gap: 7px; position: relative; }

.ppl-client-nav a {
	align-items: center;
	border: 1px solid transparent;
	border-radius: 12px;
	color: #bbb7cf;
	display: flex;
	font-size: .91rem;
	font-weight: 600;
	gap: 12px;
	padding: 12px 13px;
	text-decoration: none;
	transition: .2s ease;
}

.ppl-client-nav a span {
	align-items: center;
	color: #9691ae;
	display: inline-flex;
	font-size: 1rem;
	height: 22px;
	justify-content: center;
	width: 22px;
}

.ppl-client-nav a:hover,
.ppl-client-nav a.is-active {
	background: linear-gradient(90deg, rgba(240, 0, 153, .20), rgba(139, 92, 246, .12));
	border-color: rgba(240, 0, 153, .22);
	color: #fff;
}

.ppl-client-nav a.is-active span { color: #ff5bc0; }

.ppl-client-sidebar__bottom { margin-top: auto; position: relative; }

.ppl-client-help {
	background: rgba(255,255,255,.045);
	border: 1px solid var(--ppl-client-line);
	border-radius: 17px;
	padding: 17px;
}

.ppl-client-help__icon,
.ppl-support-card__icon {
	align-items: center;
	background: rgba(240, 0, 153, .12);
	border: 1px solid rgba(240, 0, 153, .22);
	border-radius: 50%;
	color: #ff5bc0;
	display: flex;
	height: 36px;
	justify-content: center;
	width: 36px;
}

.ppl-client-help strong { display: block; margin-top: 12px; }
.ppl-client-help p { color: var(--ppl-client-muted); font-size: .78rem; margin: 5px 0 14px; }

.ppl-client-help a {
	border: 1px solid rgba(240,0,153,.45);
	border-radius: 9px;
	color: #fff;
	display: block;
	font-size: .78rem;
	padding: 9px 10px;
	text-align: center;
	text-decoration: none;
}

.ppl-client-help a:hover { background: rgba(240,0,153,.12); }

.ppl-client-main { min-width: 0; position: relative; }

.ppl-client-main::after {
	background: linear-gradient(90deg, transparent, rgba(240,0,153,.22), transparent);
	content: "";
	height: 1px;
	left: 4%;
	position: absolute;
	right: 4%;
	top: 90px;
}

.ppl-client-topbar {
	align-items: center;
	border-bottom: 1px solid rgba(255,255,255,.07);
	display: flex;
	height: 72px;
	justify-content: flex-end;
	padding: 0 34px;
}

.ppl-client-topbar__actions { align-items: center; display: flex; gap: 16px; }
.ppl-icon-button {
	background: rgba(255,255,255,.04);
	border: 1px solid var(--ppl-client-line);
	border-radius: 10px;
	color: #c9c5d9;
	cursor: pointer;
	height: 38px;
	width: 38px;
}

.ppl-client-user { align-items: center; color: #fff; display: flex; font-size: .86rem; font-weight: 600; gap: 9px; }
.ppl-client-user .ppl-avatar {
	background: linear-gradient(135deg, #f09, #7c3aed);
	box-shadow: 0 6px 18px rgba(240,0,153,.25);
	height: 36px;
	width: 36px;
}

.ppl-client-signout { color: #9792aa; font-size: .8rem; text-decoration: none; }
.ppl-client-signout:hover { color: #fff; }

.ppl-client-topbar__mobile-brand { display: none; }

.ppl-client-content { margin: 0 auto; max-width: 1380px; padding: 38px 34px 54px; }

.ppl-client-welcome {
	align-items: flex-end;
	display: flex;
	gap: 20px;
	justify-content: space-between;
	margin-bottom: 25px;
}

.ppl-client-eyebrow,
.ppl-section-eyebrow {
	color: #ff5bc0;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .16em;
	margin: 0 0 7px;
	text-transform: uppercase;
}

.ppl-client-welcome h1 {
	color: #fff;
	font-size: clamp(1.8rem, 3vw, 2.55rem);
	letter-spacing: -.04em;
	line-height: 1.05;
	margin: 0;
}

.ppl-client-welcome > div:first-child > p:last-child { color: var(--ppl-client-muted); margin: 8px 0 0; }

.ppl-client-welcome__status {
	align-items: center;
	background: rgba(255,255,255,.04);
	border: 1px solid var(--ppl-client-line);
	border-radius: 999px;
	color: #cbc7d9;
	display: inline-flex;
	font-size: .75rem;
	gap: 8px;
	padding: 8px 12px;
	white-space: nowrap;
}

.ppl-status-dot {
	background: #35e59a;
	border-radius: 50%;
	box-shadow: 0 0 14px rgba(53,229,154,.7);
	height: 7px;
	width: 7px;
}

.ppl-client-summary-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-bottom: 18px;
}

.ppl-glass-card {
	background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 17px;
	box-shadow: 0 22px 60px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.07);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

.ppl-summary-card {
	align-items: center;
	display: flex;
	gap: 15px;
	min-height: 126px;
	padding: 21px 22px;
	position: relative;
	overflow: hidden;
}

.ppl-summary-card::after {
	background: radial-gradient(circle, rgba(240,0,153,.20), transparent 70%);
	content: "";
	height: 160px;
	position: absolute;
	right: -80px;
	top: -70px;
	width: 160px;
}

.ppl-summary-card--credits::after { background: radial-gradient(circle, rgba(53,229,154,.16), transparent 70%); }

.ppl-summary-icon {
	align-items: center;
	background: rgba(240,0,153,.13);
	border: 1px solid rgba(240,0,153,.27);
	border-radius: 14px;
	color: #ff62c3;
	display: flex;
	font-size: 1.35rem;
	height: 54px;
	justify-content: center;
	width: 54px;
}

.ppl-summary-card--credits .ppl-summary-icon {
	background: rgba(53,229,154,.10);
	border-color: rgba(53,229,154,.23);
	color: #47eaa1;
}

.ppl-summary-copy { min-width: 0; }
.ppl-summary-copy span { color: #b8b3c9; display: block; font-size: .75rem; }
.ppl-summary-copy strong { color: #fff; display: block; font-size: 1.75rem; line-height: 1.15; margin-top: 2px; }
.ppl-summary-copy small { color: #8f899f; font-size: .72rem; }

.ppl-summary-link {
	color: #ff71c8;
	font-size: .75rem;
	font-weight: 700;
	margin-left: auto;
	position: relative;
	text-decoration: none;
	white-space: nowrap;
	z-index: 1;
}

.ppl-summary-card--credits .ppl-summary-link { color: #54e9a6; }

.ppl-section-heading {
	align-items: center;
	display: flex;
	gap: 18px;
	justify-content: space-between;
	margin-bottom: 17px;
}

.ppl-section-heading h2 { color: #fff; font-size: 1.08rem; letter-spacing: -.02em; margin: 0; }
.ppl-current-service, .ppl-section-count {
	background: rgba(255,255,255,.05);
	border: 1px solid var(--ppl-client-line);
	border-radius: 999px;
	color: #bdb8cf;
	font-size: .7rem;
	font-weight: 700;
	padding: 6px 10px;
}

.ppl-progress-card { margin-bottom: 18px; padding: 22px; }

.ppl-client-progress {
	display: grid;
	grid-template-columns: repeat(6, minmax(0,1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.ppl-client-progress li { min-width: 0; }

.ppl-client-progress__chevron {
	align-items: center;
	background: rgba(255,255,255,.055);
	border: 1px solid rgba(255,255,255,.09);
	clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 50%, calc(100% - 17px) 100%, 0 100%, 17px 50%);
	color: #777185;
	display: flex;
	font-size: .67rem;
	font-weight: 800;
	gap: 6px;
	justify-content: center;
	letter-spacing: .06em;
	min-height: 47px;
	overflow: hidden;
	padding: 8px 18px;
	text-transform: uppercase;
	white-space: nowrap;
}

.ppl-client-progress li:first-child .ppl-client-progress__chevron {
	clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 50%, calc(100% - 17px) 100%, 0 100%);
	border-radius: 9px 0 0 9px;
}

.ppl-client-progress li:last-child .ppl-client-progress__chevron {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 17px 50%);
	border-radius: 0 9px 9px 0;
}

.ppl-client-progress li.is-completed .ppl-client-progress__chevron {
	background: linear-gradient(90deg, rgba(240,0,153,.28), rgba(139,92,246,.22));
	border-color: rgba(240,0,153,.28);
	color: #f0d9e9;
}

.ppl-client-progress li.is-active .ppl-client-progress__chevron {
	background: linear-gradient(100deg, #f09, #8b5cf6);
	border-color: transparent;
	box-shadow: 0 8px 25px rgba(240,0,153,.26);
	color: #fff;
}

.ppl-progress-detail {
	border-top: 1px solid rgba(255,255,255,.08);
	display: grid;
	gap: 30px;
	grid-template-columns: 1fr 1fr;
	margin-top: 20px;
	padding-top: 18px;
}

.ppl-progress-detail > div + div {
	border-left: 1px solid rgba(255,255,255,.08);
	padding-left: 30px;
}

.ppl-progress-detail__label {
	color: #8f899f;
	display: block;
	font-size: .67rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.ppl-progress-detail strong { color: #fff; display: block; font-size: 1.15rem; margin-top: 4px; }
.ppl-progress-detail p { color: #9892aa; font-size: .78rem; margin: 3px 0 0; }

.ppl-deliverables-card { overflow: hidden; padding: 22px; }
.ppl-deliverables-table-wrap { overflow-x: auto; }
.ppl-deliverables-table { border-collapse: collapse; min-width: 720px; width: 100%; }
.ppl-deliverables-table th {
	border-bottom: 1px solid rgba(255,255,255,.09);
	color: #777185;
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .08em;
	padding: 0 12px 11px;
	text-align: left;
	text-transform: uppercase;
}
.ppl-deliverables-table td {
	border-bottom: 1px solid rgba(255,255,255,.065);
	color: #b9b4c8;
	font-size: .78rem;
	padding: 13px 12px;
	vertical-align: middle;
}
.ppl-deliverables-table tr:last-child td { border-bottom: 0; }
.ppl-deliverables-table td:first-child { color: #fff; min-width: 220px; }
.ppl-deliverables-table td strong { display: block; font-size: .82rem; }
.ppl-deliverables-table td small { color: #777185; display: block; margin-top: 2px; }

.ppl-service-pill,
.ppl-stage-pill {
	border-radius: 999px;
	display: inline-block;
	font-size: .65rem;
	font-weight: 800;
	padding: 5px 9px;
	white-space: nowrap;
}

.ppl-service-pill {
	background: rgba(139,92,246,.14);
	border: 1px solid rgba(139,92,246,.22);
	color: #c6b2ff;
}

.ppl-stage-pill { border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.05); color: #aaa4b9; }
.ppl-stage-pill--ordered { color: #b7a6ff; border-color: rgba(139,92,246,.26); background: rgba(139,92,246,.12); }
.ppl-stage-pill--preparing { color: #65cfff; border-color: rgba(56,189,248,.25); background: rgba(56,189,248,.10); }
.ppl-stage-pill--production { color: #ff69c5; border-color: rgba(240,0,153,.25); background: rgba(240,0,153,.10); }
.ppl-stage-pill--quality_check { color: #f8bd5a; border-color: rgba(245,158,11,.25); background: rgba(245,158,11,.10); }
.ppl-stage-pill--ready { color: #45e6c2; border-color: rgba(20,184,166,.25); background: rgba(20,184,166,.10); }
.ppl-stage-pill--completed { color: #68e69f; border-color: rgba(34,197,94,.25); background: rgba(34,197,94,.10); }

.ppl-ready-state {
	align-items: center;
	background: rgba(255,255,255,.025);
	border: 1px dashed rgba(255,255,255,.12);
	border-radius: 13px;
	display: flex;
	gap: 14px;
	padding: 20px;
}

.ppl-ready-state__icon {
	align-items: center;
	background: rgba(240,0,153,.11);
	border: 1px solid rgba(240,0,153,.23);
	border-radius: 12px;
	color: #ff5bc0;
	display: flex;
	flex: 0 0 42px;
	height: 42px;
	justify-content: center;
	width: 42px;
}

.ppl-ready-state strong { color: #fff; display: block; }
.ppl-ready-state p { color: #b6b1c6; font-size: .78rem; margin: 3px 0 0; }

.ppl-support-card {
	align-items: center;
	background: linear-gradient(100deg, rgba(240,0,153,.13), rgba(139,92,246,.08));
	border: 1px solid rgba(240,0,153,.20);
	border-radius: 17px;
	display: flex;
	gap: 15px;
	margin-top: 18px;
	padding: 18px 21px;
}

.ppl-support-card__icon { flex: 0 0 42px; height: 42px; width: 42px; }
.ppl-support-card strong { color: #fff; display: block; }
.ppl-support-card p { color: #a29caf; font-size: .78rem; margin: 2px 0 0; }
.ppl-client-button {
	background: linear-gradient(100deg, #f09, #8b5cf6);
	border-radius: 9px;
	box-shadow: 0 9px 24px rgba(240,0,153,.20);
	color: #fff;
	font-size: .75rem;
	font-weight: 800;
	margin-left: auto;
	padding: 10px 15px;
	text-decoration: none;
	white-space: nowrap;
}
.ppl-client-button:hover { color: #fff; filter: brightness(1.08); }

@media (max-width: 1000px) {
	.ppl-client-shell { grid-template-columns: 82px minmax(0,1fr); }
	.ppl-client-sidebar { padding: 22px 12px; }
	.ppl-client-brand { justify-content: center; padding: 4px 0 32px; }
	.ppl-client-brand > div, .ppl-client-nav a:not(.is-active)::after, .ppl-client-nav a { }
	.ppl-client-brand > div { display: none; }
	.ppl-client-nav a { justify-content: center; font-size: 0; padding: 12px; }
	.ppl-client-nav a span { font-size: 1rem; }
	.ppl-client-help { display: none; }
}

@media (max-width: 760px) {
	.ppl-client-shell { display: block; }
	.ppl-client-sidebar { border-right: 0; border-bottom: 1px solid var(--ppl-client-line); display: block; padding: 12px 16px; }
	.ppl-client-brand { display: inline-flex; padding: 0; }
	.ppl-client-brand > div { display: block; }
	.ppl-client-nav { display: none; }
	.ppl-client-sidebar__bottom { display: none; }
	.ppl-client-topbar { height: 58px; padding: 0 16px; }
	.ppl-client-main::after { top: 58px; }
	.ppl-client-topbar__mobile-brand { color: #fff; display: block; font-size: 0; }
	.ppl-client-topbar__actions { margin-left: auto; }
	.ppl-client-content { padding: 25px 16px 38px; }
	.ppl-client-welcome { align-items: flex-start; flex-direction: column; }
	.ppl-client-summary-grid { grid-template-columns: 1fr; }
	.ppl-client-progress { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 5px; }
	.ppl-client-progress__chevron { clip-path: none !important; border-radius: 8px !important; }
	.ppl-progress-detail { grid-template-columns: 1fr; gap: 14px; }
	.ppl-progress-detail > div + div { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); padding-left: 0; padding-top: 14px; }
	.ppl-support-card { align-items: flex-start; flex-wrap: wrap; }
	.ppl-client-button { margin-left: 57px; }
	.ppl-client-signout { display: none; }
}

/* v1.2.4 — client services layout and empty state */
.ppl-services-card {
	margin-bottom: 18px;
	overflow: hidden;
	padding: 22px;
}
.ppl-services-card .ppl-section-heading { margin-bottom: 18px; }
.ppl-service-grid { min-width: 0; }
.ppl-service-card { min-width: 0; }
.ppl-service-card h3,
.ppl-service-card p { overflow-wrap: anywhere; }
.ppl-services-card .ppl-ready-state { min-height: 74px; }

/* The work card shares the services card's inset padding (it had none, so its
   heading and count badge sat flush against the border). */
.ppl-work-card { overflow: hidden; padding: 22px; }
.ppl-work-card .ppl-section-heading { margin-bottom: 18px; }

/* v1.2 client services/comments */
.ppl-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.ppl-service-card{display:flex;gap:14px;padding:18px;border:1px solid var(--ppl-client-line);background:rgba(255,255,255,.045);border-radius:18px}.ppl-service-card__icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(240,0,153,.12);color:#ff5bc0}.ppl-service-card h3{margin:0 0 5px;font-size:.92rem}.ppl-service-card p{margin:0 0 7px;color:var(--ppl-client-muted);font-size:.76rem;line-height:1.5}.ppl-service-card span{font-size:.7rem;color:#ff8ad0}.ppl-deliverable-comments{min-width:180px}.ppl-deliverable-comments details{font-size:.75rem}.ppl-deliverable-comments summary{cursor:pointer;color:#ff79c8}.ppl-comment-list{display:grid;gap:8px;margin:10px 0}.ppl-comment{padding:9px 10px;border-radius:10px;background:rgba(255,255,255,.05)}.ppl-comment strong{display:block;font-size:.72rem}.ppl-comment span{display:block;color:#8e899f;font-size:.63rem}.ppl-comment p{margin:5px 0 0;color:#d9d5e5;white-space:normal}.ppl-deliverable-comments form textarea{width:100%;box-sizing:border-box;background:rgba(255,255,255,.04);border:1px solid var(--ppl-client-line);color:#fff;border-radius:9px;padding:8px;margin-bottom:6px}.ppl-deliverable-comments .ppl-client-button{border:0;padding:7px 11px;font-size:.68rem;cursor:pointer}.ppl-comment--manager{border-left:2px solid #ff5bc0}.ppl-comment--client{border-left:2px solid #38bdf8}.ppl-comment--team{border-left:2px solid #8b5cf6}
@media(max-width:900px){.ppl-service-grid{grid-template-columns:1fr}.ppl-deliverables-table{min-width:1050px}}

/* v1.2.2 — organized updates modal */
body.ppl-modal-open { overflow: hidden; }
.ppl-deliverable-comments { min-width: 150px; text-align: right; }
.ppl-view-updates { align-items: center; background: rgba(240,0,153,.09); border: 1px solid rgba(240,0,153,.24); border-radius: 10px; color: #ff83ce; cursor: pointer; display: inline-flex; gap: 8px; justify-content: center; padding: 9px 12px; font: inherit; font-size: .72rem; font-weight: 800; transition: .18s ease; }
.ppl-view-updates strong { align-items: center; background: rgba(255,255,255,.08); border-radius: 999px; color: #fff; display: inline-flex; font-size: .62rem; height: 19px; justify-content: center; min-width: 19px; padding: 0 4px; }
.ppl-view-updates:hover { background: rgba(240,0,153,.16); border-color: rgba(240,0,153,.42); transform: translateY(-1px); }
.ppl-updates-modal { align-items: center; background: rgba(5,4,12,.78); backdrop-filter: blur(12px); display: flex; inset: 0 !important; justify-content: center; opacity: 0; padding: 24px; position: fixed !important; transition: opacity .18s ease; z-index: 999999; }
.ppl-updates-modal[hidden] { display: none !important; visibility: hidden !important; pointer-events: none !important; }
.ppl-updates-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.ppl-updates-modal__panel { background: linear-gradient(145deg, rgba(31,27,44,.98), rgba(15,13,24,.98)); border: 1px solid rgba(255,255,255,.12); border-radius: 22px; box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 45px rgba(240,0,153,.08); color: #fff; max-height: min(760px, 90vh); overflow: hidden; width: min(680px, 100%); transform: translateY(12px) scale(.985); transition: transform .18s ease; }
.ppl-updates-modal.is-open .ppl-updates-modal__panel { transform: translateY(0) scale(1); }
.ppl-updates-modal__header { align-items: flex-start; border-bottom: 1px solid rgba(255,255,255,.09); display: flex; gap: 20px; justify-content: space-between; padding: 24px 26px 20px; }
.ppl-updates-modal__header h3 { font-size: 1.15rem; line-height: 1.3; margin: 3px 0 5px; }
.ppl-updates-modal__header > div > span { color: #9891a7; font-size: .72rem; }
.ppl-modal-close { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; color: #fff; cursor: pointer; font-size: 1.35rem; height: 38px; line-height: 1; width: 38px; }
.ppl-updates-modal__body { max-height: 50vh; overflow: auto; padding: 20px 26px; }
.ppl-updates-modal__body .ppl-comment-list { gap: 12px; margin: 0; }
.ppl-comment { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 13px 15px; }
.ppl-comment__meta { align-items: center; display: flex; gap: 8px; justify-content: space-between; }
.ppl-comment__meta strong { color: #fff; font-size: .76rem; }
.ppl-comment__meta span { color: #858094; font-size: .64rem; }
.ppl-comment p { color: #d8d3e2; font-size: .78rem; line-height: 1.6; margin: 9px 0 0; }
.ppl-comment--manager { border-left: 3px solid #ff5bc0; }
.ppl-comment--client { border-left: 3px solid #38bdf8; }
.ppl-comment--team { border-left: 3px solid #8b5cf6; }
.ppl-updates-empty { border: 1px dashed rgba(255,255,255,.12); border-radius: 14px; padding: 28px 20px; text-align: center; }
.ppl-updates-empty span { align-items: center; background: rgba(240,0,153,.12); border: 1px solid rgba(240,0,153,.2); border-radius: 12px; color: #ff63c3; display: inline-flex; height: 42px; justify-content: center; width: 42px; }
.ppl-updates-empty strong { display: block; font-size: .84rem; margin-top: 10px; }
.ppl-updates-empty p { color: #898396; font-size: .72rem; margin: 5px auto 0; max-width: 380px; line-height: 1.5; }
.ppl-updates-modal__footer { background: rgba(0,0,0,.12); border-top: 1px solid rgba(255,255,255,.08); padding: 18px 26px 22px; }
.ppl-comment-form { display: flex; gap: 10px; }
.ppl-comment-form textarea { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.11); border-radius: 12px; box-sizing: border-box; color: #fff; flex: 1; font: inherit; font-size: .75rem; min-height: 64px; outline: none; padding: 11px 12px; resize: vertical; }
.ppl-comment-form textarea:focus { border-color: rgba(240,0,153,.45); box-shadow: 0 0 0 3px rgba(240,0,153,.08); }
.ppl-comment-form .ppl-client-button { align-self: flex-end; border: 0; cursor: pointer; margin-left: 0; }
@media(max-width:760px){.ppl-updates-modal{padding:12px}.ppl-updates-modal__panel{max-height:94vh}.ppl-updates-modal__header,.ppl-updates-modal__body,.ppl-updates-modal__footer{padding-left:18px;padding-right:18px}.ppl-updates-modal__body{max-height:54vh}.ppl-comment-form{display:block}.ppl-comment-form .ppl-client-button{margin-top:8px;width:100%}.ppl-comment__meta{align-items:flex-start;display:block}.ppl-comment__meta span{display:block;margin-top:3px}.ppl-deliverable-comments{text-align:left}}


/* v1.2.3 — modal hardening */
.ppl-client-dashboard .ppl-updates-modal[hidden] { display: none !important; }
.ppl-client-dashboard .ppl-updates-modal { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; margin: 0 !important; box-sizing: border-box !important; }
.ppl-client-dashboard .ppl-updates-modal:not(.is-open) { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
.ppl-client-dashboard .ppl-updates-modal.is-open { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }
.ppl-client-dashboard .ppl-updates-modal__panel { max-height: 90vh !important; overflow: hidden !important; }


/* v1.2.5 — force updates into a real viewport-level modal */
body.ppl-modal-open { overflow: hidden !important; }
.ppl-deliverable-comments details,
.ppl-deliverable-comments details[open] { display: none !important; }
.ppl-updates-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background: rgba(5,4,12,.82) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}
.ppl-updates-modal[hidden] { display: none !important; }
.ppl-updates-modal.is-open {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.ppl-updates-modal__panel {
  position: relative !important;
  z-index: 1 !important;
  width: min(720px, 100%) !important;
  max-width: 720px !important;
  max-height: min(760px, 90vh) !important;
  margin: 0 !important;
  overflow: hidden !important;
  transform: translateY(16px) scale(.98) !important;
  transition: transform .18s ease, opacity .18s ease !important;
}
.ppl-updates-modal.is-open .ppl-updates-modal__panel {
  transform: translateY(0) scale(1) !important;
}
.ppl-updates-modal__body { overflow-y: auto !important; }
@media (max-width: 760px) {
  .ppl-updates-modal { padding: 12px !important; }
  .ppl-updates-modal__panel { max-height: 94vh !important; }
}

/* v1.2.6 — true body-level updates modal. The modal is created and appended directly to <body>. */
html.ppl-global-modal-open,
body.ppl-global-modal-open { overflow: hidden !important; }
.ppl-global-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2147483647 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  isolation: isolate !important;
}
.ppl-global-modal.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.ppl-global-modal__backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(4,3,12,.84) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
.ppl-global-modal__panel {
  position: relative !important;
  z-index: 2 !important;
  width: min(720px, calc(100vw - 48px)) !important;
  max-height: min(760px, calc(100vh - 48px)) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 24px !important;
  background: linear-gradient(145deg, rgba(31,27,45,.985), rgba(13,11,23,.985)) !important;
  box-shadow: 0 35px 120px rgba(0,0,0,.65), 0 0 60px rgba(240,0,153,.12) !important;
  color: #fff !important;
  transform: translateY(14px) scale(.975) !important;
  transition: transform .16s ease !important;
}
.ppl-global-modal.is-open .ppl-global-modal__panel { transform: translateY(0) scale(1) !important; }
.ppl-global-modal--wide .ppl-global-modal__panel { width: min(680px, calc(100vw - 48px)) !important; }

/* Episode deliverables modal — table layout (name / status / comments),
   replacing the earlier checkbox-list style. No select/select-all. */
.ppl-mrow-table { border-collapse: collapse; width: 100%; }
.ppl-mrow-table thead th {
	border-bottom: 1px solid rgba(255,255,255,.12);
	color: #9690a5;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .03em;
	padding: 0 14px 10px;
	text-align: left;
	text-transform: uppercase;
}
.ppl-mrow-table tbody tr + tr td { border-top: 1px solid rgba(255,255,255,.07); }
.ppl-mrow-table td { padding: 14px; vertical-align: middle; }
.ppl-mrow-table td.ppl-mrow__name,
.ppl-mrow-table .ppl-mrow__name { color: #fff; font-weight: 600; }
.ppl-mrow__pill {
	background: rgba(255,255,255,.08);
	border: 1px solid var(--ppl-step);
	border-radius: 999px;
	color: var(--ppl-step);
	display: inline-block;
	font-size: .74rem;
	font-weight: 700;
	padding: 4px 12px;
	white-space: nowrap;
}
.ppl-mrow__comment-link {
	background: none;
	border: 1px solid rgba(240,0,153,.4);
	border-radius: 999px;
	color: #ff5bc0;
	cursor: pointer;
	font: inherit;
	font-size: .78rem;
	font-weight: 700;
	padding: 6px 14px;
	white-space: nowrap;
}
.ppl-mrow__comment-link:hover { background: rgba(240,0,153,.1); }
.ppl-mrow-table__hint {
	color: #9690a5;
	font-size: .78rem;
	margin: 16px 14px 4px;
}
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-mrow-table thead th { color: #6b6480; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-mrow-table tbody tr + tr td { border-top-color: rgba(17,24,39,.08); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-mrow-table .ppl-mrow__name { color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-mrow-table__hint { color: #6b6480; }

.ppl-global-modal__header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 25px 27px 21px !important;
  border-bottom: 1px solid rgba(255,255,255,.09) !important;
}
.ppl-global-modal__eyebrow { display:block !important; color:#ff5fc1 !important; font-size:.62rem !important; font-weight:900 !important; letter-spacing:.15em !important; }
.ppl-global-modal__title-wrap h2 { margin:5px 0 6px !important; color:#fff !important; font-size:1.18rem !important; line-height:1.25 !important; }
.ppl-global-modal__title-wrap p { margin:0 !important; color:#9690a5 !important; font-size:.72rem !important; }
.ppl-global-modal__title-wrap p span { color:#ff5fc1 !important; padding:0 4px !important; }
.ppl-global-modal__close { width:38px !important; height:38px !important; flex:0 0 38px !important; padding:0 !important; border:1px solid rgba(255,255,255,.1) !important; border-radius:11px !important; background:rgba(255,255,255,.055) !important; color:#fff !important; font-size:1.4rem !important; line-height:1 !important; cursor:pointer !important; }
.ppl-global-modal__close:hover { background:rgba(240,0,153,.14) !important; border-color:rgba(240,0,153,.35) !important; }
.ppl-global-modal__body { max-height:48vh !important; overflow-y:auto !important; padding:20px 27px !important; }
.ppl-global-comment-list { display:grid !important; gap:12px !important; }
.ppl-global-comment { padding:14px 16px !important; border:1px solid rgba(255,255,255,.08) !important; border-left-width:3px !important; border-radius:14px !important; background:rgba(255,255,255,.045) !important; }
.ppl-global-comment--client { border-left-color:#38bdf8 !important; }
.ppl-global-comment--manager { border-left-color:#ff4fba !important; }
.ppl-global-comment--team { border-left-color:#9b6cff !important; }
.ppl-global-comment__meta { display:flex !important; justify-content:space-between !important; gap:14px !important; align-items:center !important; }
.ppl-global-comment__meta strong { color:#fff !important; font-size:.76rem !important; }
.ppl-global-comment__meta span { color:#858095 !important; font-size:.63rem !important; text-align:right !important; }
.ppl-global-comment p { margin:9px 0 0 !important; color:#d9d5e3 !important; font-size:.78rem !important; line-height:1.6 !important; }
.ppl-global-updates-empty { padding:34px 20px !important; text-align:center !important; border:1px dashed rgba(255,255,255,.12) !important; border-radius:15px !important; }
.ppl-global-updates-empty__icon { width:42px !important; height:42px !important; margin:0 auto !important; display:grid !important; place-items:center !important; border-radius:12px !important; color:#ff62c3 !important; background:rgba(240,0,153,.11) !important; }
.ppl-global-updates-empty strong { display:block !important; margin-top:10px !important; font-size:.84rem !important; }
.ppl-global-updates-empty p { max-width:390px !important; margin:5px auto 0 !important; color:#898396 !important; font-size:.72rem !important; line-height:1.5 !important; }
.ppl-global-modal__footer { padding:18px 27px 22px !important; border-top:1px solid rgba(255,255,255,.08) !important; background:rgba(0,0,0,.13) !important; }
.ppl-global-comment-form { display:flex !important; align-items:flex-end !important; gap:10px !important; margin:0 !important; }
.ppl-global-comment-form textarea { flex:1 !important; min-height:66px !important; width:auto !important; resize:vertical !important; box-sizing:border-box !important; padding:11px 12px !important; border:1px solid rgba(255,255,255,.11) !important; border-radius:12px !important; background:rgba(255,255,255,.045) !important; color:#fff !important; font:inherit !important; font-size:.75rem !important; outline:none !important; }
.ppl-global-comment-form textarea:focus { border-color:rgba(240,0,153,.5) !important; box-shadow:0 0 0 3px rgba(240,0,153,.08) !important; }
.ppl-global-comment-form .ppl-client-button { flex:0 0 auto !important; margin:0 !important; border:0 !important; cursor:pointer !important; }
@media (max-width:760px) {
  .ppl-global-modal { padding:12px !important; }
  .ppl-global-modal__panel { width:calc(100vw - 24px) !important; max-height:calc(100vh - 24px) !important; border-radius:19px !important; }
  .ppl-global-modal__header,.ppl-global-modal__body,.ppl-global-modal__footer { padding-left:18px !important; padding-right:18px !important; }
  .ppl-global-modal__body { max-height:52vh !important; }
  .ppl-global-comment__meta { display:block !important; }
  .ppl-global-comment__meta span { display:block !important; margin-top:3px !important; text-align:left !important; }
  .ppl-global-comment-form { display:block !important; }
  .ppl-global-comment-form .ppl-client-button { width:100% !important; margin-top:9px !important; }
}

/* ==================================================================== */
/* Header account menus: notifications + profile dropdowns             */
/* ==================================================================== */

.ppl-account-menu { position: relative; }

.ppl-icon-button {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	position: relative;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ppl-icon-button svg { height: 18px; width: 18px; }
.ppl-icon-button:hover,
.ppl-account-menu.is-open .ppl-icon-button { background: rgba(240,0,153,.14); border-color: rgba(240,0,153,.4); color: #fff; }

.ppl-notif-badge {
	align-items: center;
	background: linear-gradient(135deg, #f09, #7c3aed);
	border: 2px solid #171225;
	border-radius: 999px;
	color: #fff;
	display: flex;
	font-size: .58rem;
	font-weight: 800;
	height: 18px;
	justify-content: center;
	line-height: 1;
	min-width: 18px;
	padding: 0 3px;
	position: absolute;
	right: -6px;
	top: -6px;
}

.ppl-profile-button {
	background: rgba(255,255,255,.04);
	border: 1px solid var(--ppl-client-line);
	border-radius: 999px;
	cursor: pointer;
	padding: 5px 12px 5px 6px;
	transition: background .15s ease, border-color .15s ease;
}
.ppl-profile-button:hover,
.ppl-account-menu.is-open .ppl-profile-button { background: rgba(240,0,153,.12); border-color: rgba(240,0,153,.4); }
.ppl-profile-button__caret { color: #b6b1c8; display: inline-flex; }
.ppl-profile-button__caret svg { height: 15px; width: 15px; transition: transform .18s ease; }
.ppl-account-menu.is-open .ppl-profile-button__caret svg { transform: rotate(180deg); }

.ppl-dropdown {
	background: linear-gradient(180deg, #211a33, #171123);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 18px;
	box-shadow: 0 30px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
	display: flex;
	flex-direction: column;
	max-height: min(78vh, 560px);
	opacity: 0;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: calc(100% + 12px);
	transform: translateY(-8px);
	transition: opacity .16s ease, transform .16s ease;
	width: 360px;
	z-index: 60;
}
.ppl-account-menu.is-open .ppl-dropdown { opacity: 1; transform: translateY(0); }
.ppl-dropdown[hidden] { display: none; }
.ppl-dropdown::before {
	content: "";
	border: 7px solid transparent;
	border-bottom-color: #211a33;
	position: absolute;
	right: 16px;
	top: -14px;
}
.ppl-notif-dropdown::before { right: 12px; }

.ppl-dropdown__head {
	align-items: center;
	border-bottom: 1px solid rgba(255,255,255,.08);
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding: 16px 18px;
}
.ppl-dropdown__eyebrow { color: #ff5fc1; display: block; font-size: .6rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.ppl-dropdown__head h3 { color: #fff; font-size: 1.05rem; letter-spacing: -.02em; margin: 4px 0 0; }
.ppl-dropdown__count {
	background: rgba(255,255,255,.06);
	border: 1px solid var(--ppl-client-line);
	border-radius: 999px;
	color: #cfcadd;
	font-size: .7rem;
	font-weight: 700;
	padding: 4px 10px;
}

.ppl-dropdown__scroll { overflow-y: auto; padding: 8px; }

.ppl-dropdown__empty { padding: 34px 22px; text-align: center; }
.ppl-dropdown__empty-icon { display: block; font-size: 1.6rem; margin-bottom: 8px; }
.ppl-dropdown__empty strong { color: #fff; display: block; font-size: .9rem; }
.ppl-dropdown__empty p { color: #9690a5; font-size: .76rem; margin: 6px 0 0; }

.ppl-notif-list { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
.ppl-notif-item {
	align-items: flex-start;
	border: 1px solid rgba(255,255,255,.07);
	border-radius: 13px;
	background: rgba(255,255,255,.03);
	display: flex;
	gap: 11px;
	padding: 12px 13px;
	transition: background .14s ease, border-color .14s ease;
}
.ppl-notif-item:hover { background: rgba(255,255,255,.06); border-color: rgba(240,0,153,.25); }
.ppl-notif-item__dot { border-radius: 50%; flex: 0 0 8px; height: 8px; margin-top: 5px; width: 8px; }
.ppl-notif-item--manager .ppl-notif-item__dot { background: #ff4fba; box-shadow: 0 0 10px rgba(255,79,186,.7); }
.ppl-notif-item--team .ppl-notif-item__dot { background: #9b6cff; box-shadow: 0 0 10px rgba(155,108,255,.7); }
.ppl-notif-item__body { min-width: 0; }
.ppl-notif-item__meta { align-items: baseline; display: flex; gap: 8px; margin: 0; }
.ppl-notif-item__meta strong { color: #fff; font-size: .78rem; }
.ppl-notif-item__meta span { color: #857f95; font-size: .64rem; }
.ppl-notif-item__text { color: #d7d3e2; font-size: .78rem; line-height: 1.5; margin: 4px 0 0; }
.ppl-notif-item__foot { color: #857f95; font-size: .66rem; margin: 6px 0 0; }
.ppl-notif-item__foot span { color: #b7a6d6; }

.ppl-dropdown__foot-link,
.ppl-dropdown__logout {
	align-items: center;
	border-top: 1px solid rgba(255,255,255,.08);
	color: #ff71c8;
	display: flex;
	font-size: .78rem;
	font-weight: 700;
	gap: 9px;
	justify-content: center;
	padding: 14px;
	text-decoration: none;
}
.ppl-dropdown__foot-link:hover { background: rgba(240,0,153,.08); }
.ppl-dropdown__logout { color: #ff7a7a; }
.ppl-dropdown__logout:hover { background: rgba(255,90,90,.1); }
.ppl-dropdown__logout-icon { display: inline-flex; }
.ppl-dropdown__logout-icon svg { height: 16px; width: 16px; }

/* Profile dropdown */
.ppl-avatar--lg { font-size: 1rem; height: 46px; width: 46px; }
.ppl-profile-card {
	align-items: center;
	border-bottom: 1px solid rgba(255,255,255,.08);
	display: flex;
	gap: 13px;
	padding: 18px;
}
.ppl-profile-card__id { min-width: 0; }
.ppl-profile-card__id strong { color: #fff; display: block; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppl-profile-card__id span { color: #9690a5; display: block; font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ppl-profile-tabs { display: flex; gap: 4px; padding: 10px 10px 0; }
.ppl-profile-tab {
	background: transparent;
	border: 0;
	border-radius: 9px 9px 0 0;
	color: #9690a5;
	cursor: pointer;
	flex: 1;
	font: inherit;
	font-size: .74rem;
	font-weight: 700;
	padding: 9px 6px;
	position: relative;
	transition: color .14s ease, background .14s ease;
}
.ppl-profile-tab:hover { color: #fff; }
.ppl-profile-tab.is-active { background: rgba(240,0,153,.1); color: #fff; }
.ppl-profile-tab.is-active::after {
	background: linear-gradient(90deg, #f09, #8b5cf6);
	border-radius: 2px;
	bottom: 0;
	content: "";
	height: 2px;
	left: 8px;
	position: absolute;
	right: 8px;
}
.ppl-profile-panel[hidden] { display: none; }

.ppl-profile-details { display: grid; gap: 2px; margin: 0; }
.ppl-profile-details > div {
	align-items: center;
	border-bottom: 1px solid rgba(255,255,255,.05);
	display: flex;
	gap: 14px;
	justify-content: space-between;
	padding: 9px 8px;
}
.ppl-profile-details dt { color: #9690a5; font-size: .74rem; margin: 0; }
.ppl-profile-details dd { color: #fff; font-size: .78rem; font-weight: 600; margin: 0; text-align: right; word-break: break-word; }
.ppl-profile-manage {
	align-items: center;
	color: #ff71c8;
	display: flex;
	font-size: .76rem;
	font-weight: 700;
	gap: 7px;
	justify-content: center;
	padding: 12px 8px 4px;
	text-decoration: none;
}
.ppl-profile-manage:hover { color: #fff; }

.ppl-ledger-list { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
.ppl-ledger-item {
	align-items: center;
	border: 1px solid rgba(255,255,255,.07);
	border-radius: 12px;
	background: rgba(255,255,255,.03);
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding: 11px 13px;
}
.ppl-ledger-item__main { min-width: 0; }
.ppl-ledger-item__main strong { color: #fff; display: block; font-size: .8rem; }
.ppl-ledger-item__main span { color: #cbc7d9; display: block; font-size: .73rem; margin-top: 2px; }
.ppl-ledger-item__main small { color: #857f95; display: block; font-size: .66rem; margin-top: 3px; }
.ppl-ledger-item__amount { flex: 0 0 auto; font-size: .82rem; font-weight: 800; white-space: nowrap; }
.ppl-ledger-item__amount small { font-size: .6rem; font-weight: 600; }
.ppl-ledger-item__amount.is-positive { color: #47eaa1; }
.ppl-ledger-item__amount.is-negative { color: #ff8686; }

/* ==================================================================== */
/* Service Progress: shine sweep across the active stage               */
/* ==================================================================== */

.ppl-client-progress li.is-active .ppl-client-progress__chevron { position: relative; }
.ppl-client-progress li.is-active .ppl-client-progress__chevron::after {
	background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
	content: "";
	height: 100%;
	left: -75%;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 60%;
	animation: ppl-progress-shine 2.6s ease-in-out infinite;
}
.ppl-client-progress li.is-active .ppl-client-progress__chevron > * { position: relative; z-index: 1; }

@keyframes ppl-progress-shine {
	0%   { left: -75%; }
	55%  { left: 130%; }
	100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
	.ppl-client-progress li.is-active .ppl-client-progress__chevron::after { animation: none; opacity: 0; }
}

@media (max-width: 720px) {
	.ppl-dropdown { position: fixed; left: 12px; right: 12px; top: 74px; width: auto; }
	.ppl-dropdown::before { display: none; }
	.ppl-profile-button__name { display: none; }
}

/* ==================================================================== */
/* Staff header account menus — light theme variant                    */
/* ==================================================================== */

.ppl-account-menu--light { display: inline-flex; }

.ppl-account-menu--light .ppl-icon-button {
	background: var(--ppl-surface);
	border: 1px solid var(--ppl-line);
	color: var(--ppl-muted);
	height: 40px;
	width: 40px;
}
.ppl-account-menu--light .ppl-icon-button:hover,
.ppl-account-menu--light.is-open .ppl-icon-button { background: var(--ppl-brand-soft); border-color: var(--ppl-brand); color: var(--ppl-brand); }
.ppl-account-menu--light .ppl-notif-badge { border-color: var(--ppl-surface); }

.ppl-profile-button--light {
	align-items: center;
	background: var(--ppl-surface);
	border: 1px solid var(--ppl-line);
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	gap: 9px;
	padding: 5px 12px 5px 6px;
}
.ppl-profile-button--light:hover,
.ppl-account-menu--light.is-open .ppl-profile-button--light { background: var(--ppl-brand-soft); border-color: var(--ppl-brand); }
.ppl-profile-button--light .ppl-who strong { color: var(--ppl-ink); display: block; font-size: .82rem; line-height: 1.1; }
.ppl-profile-button--light .ppl-who small { color: var(--ppl-muted); display: block; font-size: .68rem; }
.ppl-profile-button--light .ppl-profile-button__caret { color: var(--ppl-faint); display: inline-flex; }
.ppl-profile-button--light .ppl-profile-button__caret svg { height: 15px; transition: transform .18s ease; width: 15px; }
.ppl-account-menu--light.is-open .ppl-profile-button__caret svg { transform: rotate(180deg); }

.ppl-dropdown--light {
	background: var(--ppl-surface);
	border: 1px solid var(--ppl-line);
	box-shadow: 0 24px 60px rgba(16,24,40,.18), 0 2px 8px rgba(16,24,40,.08);
}
.ppl-dropdown--light::before { border-bottom-color: var(--ppl-surface); }
.ppl-dropdown--light .ppl-dropdown__head { border-bottom-color: var(--ppl-line); }
.ppl-dropdown--light .ppl-dropdown__eyebrow { color: var(--ppl-brand); }
.ppl-dropdown--light .ppl-dropdown__head h3 { color: var(--ppl-ink); }
.ppl-dropdown--light .ppl-dropdown__count { background: var(--ppl-canvas); border-color: var(--ppl-line); color: var(--ppl-muted); }

.ppl-dropdown--light .ppl-notif-item { background: var(--ppl-canvas); border-color: var(--ppl-line); }
.ppl-dropdown--light .ppl-notif-item:hover { background: var(--ppl-brand-soft); border-color: var(--ppl-brand); }
.ppl-dropdown--light .ppl-notif-item--stale .ppl-notif-item__dot { background: var(--ppl-warn); box-shadow: 0 0 10px rgba(180,83,9,.5); }
.ppl-dropdown--light .ppl-notif-item--client .ppl-notif-item__dot { background: var(--ppl-brand); box-shadow: 0 0 10px rgba(91,61,245,.45); }
.ppl-dropdown--light .ppl-notif-item__meta strong { color: var(--ppl-ink); }
.ppl-dropdown--light .ppl-notif-item__meta span,
.ppl-dropdown--light .ppl-notif-item__foot { color: var(--ppl-faint); }
.ppl-dropdown--light .ppl-notif-item__text { color: var(--ppl-muted); }
.ppl-dropdown--light .ppl-notif-item__foot span { color: var(--ppl-brand); }

.ppl-dropdown--light .ppl-dropdown__empty strong { color: var(--ppl-ink); }
.ppl-dropdown--light .ppl-dropdown__empty p { color: var(--ppl-muted); }

.ppl-dropdown--light .ppl-profile-card { border-bottom-color: var(--ppl-line); }
.ppl-dropdown--light .ppl-profile-card__id strong { color: var(--ppl-ink); }
.ppl-dropdown--light .ppl-profile-card__id span { color: var(--ppl-muted); }
.ppl-dropdown--light .ppl-avatar--lg { background: var(--ppl-brand); }
.ppl-dropdown--light .ppl-profile-details > div { border-bottom-color: var(--ppl-line); }
.ppl-dropdown--light .ppl-profile-details dt { color: var(--ppl-muted); }
.ppl-dropdown--light .ppl-profile-details dd { color: var(--ppl-ink); }
.ppl-dropdown--light .ppl-profile-manage { color: var(--ppl-brand); }
.ppl-dropdown--light .ppl-profile-manage:hover { color: var(--ppl-ink); }
.ppl-dropdown--light .ppl-dropdown__logout { border-top-color: var(--ppl-line); color: var(--ppl-danger); }
.ppl-dropdown--light .ppl-dropdown__logout:hover { background: #fef2f2; }

/* ClickUp link status inside the updates modal */
.ppl-link-status {
	align-items: center;
	border-radius: 11px !important;
	display: flex !important;
	font-size: .72rem !important;
	font-weight: 600 !important;
	gap: 8px !important;
	margin: 0 0 12px !important;
	padding: 9px 12px !important;
}
.ppl-link-status__dot { border-radius: 50%; flex: 0 0 8px; height: 8px; width: 8px; }
.ppl-link-status--on { background: rgba(53,229,154,.1) !important; border: 1px solid rgba(53,229,154,.28) !important; color: #6ff0bb !important; }
.ppl-link-status--on .ppl-link-status__dot { background: #35e59a; box-shadow: 0 0 10px rgba(53,229,154,.7); }
.ppl-link-status--off { background: rgba(255,183,77,.1) !important; border: 1px solid rgba(255,183,77,.28) !important; color: #ffcf8f !important; }
.ppl-link-status--off .ppl-link-status__dot { background: #ffb74d; }

/* ==================================================================== */
/* Buy credits screen                                                   */
/* ==================================================================== */

.ppl-buy-shell { display: block; }
.ppl-buy-shell .ppl-client-welcome .ppl-client-button { align-self: center; white-space: nowrap; }

.ppl-buy-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.ppl-buy-card {
	align-items: center;
	background: rgba(255,255,255,.03);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 22px 18px;
	position: relative;
	text-align: center;
	transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.ppl-buy-card:hover { border-color: rgba(240,0,153,.4); transform: translateY(-2px); box-shadow: 0 18px 44px rgba(0,0,0,.28); }
.ppl-buy-card__credits { align-items: baseline; color: #fff; display: flex; gap: 6px; }
.ppl-buy-card__credits strong { font-size: 2.1rem; letter-spacing: -.03em; line-height: 1; }
.ppl-buy-card__credits span { color: #b8b3c9; font-size: .8rem; }
.ppl-buy-card__price { color: #fff; font-size: 1.15rem; font-weight: 700; margin-top: 4px; }
.ppl-buy-card__per { color: #8f899f; font-size: .72rem; }
.ppl-buy-card__cta { margin-top: 12px; width: 100%; }

.ppl-buy-custom { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 14px; }
.ppl-buy-custom label { color: #cbc7d9; display: block; font-size: .8rem; margin-bottom: 7px; width: 100%; }
.ppl-buy-custom input[type="number"] {
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 11px;
	color: #fff;
	font: inherit;
	font-size: 1rem;
	max-width: 160px;
	padding: 11px 13px;
}
.ppl-buy-custom input[type="number"]:focus { border-color: rgba(240,0,153,.5); box-shadow: 0 0 0 3px rgba(240,0,153,.1); outline: none; }
.ppl-buy-note { color: #8f899f; font-size: .74rem; margin: 14px 0 0; }

/* Order-a-service cards (reuses the buy grid) */
.ppl-order-card {
	background: rgba(255,255,255,.03);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 22px 20px;
	transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.ppl-order-card:hover { border-color: rgba(240,0,153,.4); transform: translateY(-2px); box-shadow: 0 18px 44px rgba(0,0,0,.28); }
.ppl-order-card__icon {
	align-items: center;
	background: rgba(240,0,153,.13);
	border: 1px solid rgba(240,0,153,.27);
	border-radius: 12px;
	color: #ff62c3;
	display: flex;
	font-size: 1.15rem;
	height: 44px;
	justify-content: center;
	width: 44px;
}
.ppl-order-card h3 { color: #fff; font-size: 1.05rem; letter-spacing: -.01em; margin: 4px 0 0; }
.ppl-order-card__desc { color: #b8b3c9; font-size: .8rem; line-height: 1.5; margin: 0; }
.ppl-order-card__price { color: #fff; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; margin-top: auto; padding-top: 6px; }
.ppl-order-card__cta { width: 100%; }
.ppl-order-card__actions { display: flex; gap: 10px; }
.ppl-order-card__actions .ppl-order-card__cta { flex: 1; }
.ppl-order-card__details-btn { flex-shrink: 0; white-space: nowrap; width: auto !important; }

/* Comment send status: Sending… / Delivered / Failed */
.ppl-global-comment.is-pending { opacity: .85 !important; }
.ppl-global-comment__status {
	align-items: center !important;
	display: inline-flex !important;
	gap: 6px !important;
	font-size: .63rem !important;
	font-weight: 700 !important;
}
.ppl-global-comment.is-pending .ppl-global-comment__status { color: #b8b3c9 !important; }
.ppl-global-comment.is-sent .ppl-global-comment__status { color: #47eaa1 !important; }
.ppl-global-comment.is-failed .ppl-global-comment__status { color: #ff8686 !important; }
.ppl-global-comment__spinner {
	border: 2px solid rgba(255,255,255,.25) !important;
	border-top-color: #ff5fc1 !important;
	border-radius: 50% !important;
	display: inline-block !important;
	height: 11px !important;
	width: 11px !important;
	animation: ppl-comment-spin .6s linear infinite !important;
}
.ppl-global-comment__tick { font-size: .72rem !important; line-height: 1 !important; }
@keyframes ppl-comment-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.ppl-global-comment__spinner { animation: none !important; }
}

/* ==================================================================== */
/* Profile menu: readable, always-visible action footer                 */
/* ==================================================================== */

.ppl-profile-actions {
	border-top: 1px solid rgba(255,255,255,.12);
	display: grid;
	gap: 2px;
	padding: 8px;
}
.ppl-profile-action {
	align-items: center;
	border-radius: 11px;
	color: #ece9f6;
	display: flex;
	font-size: .82rem;
	font-weight: 600;
	gap: 11px;
	padding: 11px 12px;
	text-decoration: none;
	transition: background .14s ease, color .14s ease;
}
.ppl-profile-action:hover { background: rgba(240,0,153,.16); color: #fff; }
.ppl-profile-action__icon { align-items: center; color: #ff7cce; display: inline-flex; font-size: .95rem; justify-content: center; width: 20px; }
.ppl-profile-action__icon svg { height: 17px; width: 17px; }
.ppl-profile-action__arrow { color: #8f899f; margin-left: auto; }
.ppl-profile-action:hover .ppl-profile-action__arrow { color: #fff; }
.ppl-profile-action--logout { color: #ffb0b0; }
.ppl-profile-action--logout .ppl-profile-action__icon { color: #ffb0b0; }
.ppl-profile-action--logout:hover { background: rgba(255,90,90,.16); color: #ffd0d0; }

/* ==================================================================== */
/* Theme toggle button                                                  */
/* ==================================================================== */

.ppl-theme-toggle svg { height: 18px; width: 18px; }
.ppl-theme-toggle__sun { align-items: center; display: none; justify-content: center; }
.ppl-theme-toggle__moon { align-items: center; display: inline-flex; justify-content: center; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-theme-toggle__moon { display: none; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-theme-toggle__sun { display: inline-flex; }

/* ==================================================================== */
/* LIGHT THEME                                                          */
/* ==================================================================== */

.ppl-client-dashboard[data-ppl-theme="light"] {
	--ppl-client-bg: #eef0f6;
	--ppl-client-line: rgba(17,24,39,.12);
	--ppl-client-text: #1b1830;
	--ppl-client-muted: #5a5570;
	background:
		radial-gradient(circle at 84% 8%, rgba(240,0,153,.10), transparent 24%),
		radial-gradient(circle at 58% 48%, rgba(124,92,246,.09), transparent 30%),
		linear-gradient(135deg, #f3f2fb 0%, #eef0f7 45%, #f7eefb 100%);
	color: var(--ppl-client-text);
}

/* Sidebar + nav */
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-client-sidebar { background: rgba(255,255,255,.86); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-client-brand strong { color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-client-nav a { color: #4a4560; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-client-nav a:hover { background: rgba(240,0,153,.08); color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-client-help { background: rgba(17,24,39,.03); }

/* Topbar controls */
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-icon-button { background: #fff; border-color: rgba(17,24,39,.12); color: #5a5570; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-icon-button:hover,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-account-menu.is-open .ppl-icon-button { background: rgba(240,0,153,.1); border-color: rgba(240,0,153,.4); color: #c01f8f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-button { background: #fff; border-color: rgba(17,24,39,.12); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-button:hover,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-account-menu.is-open .ppl-profile-button { background: rgba(240,0,153,.08); border-color: rgba(240,0,153,.4); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-client-user,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-button__name { color: #1b1830; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-button__caret { color: #8a869c; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-notif-badge { border-color: #fff; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-client-topbar { border-bottom-color: rgba(17,24,39,.1); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-client-main::after { background: linear-gradient(90deg, transparent, rgba(240,0,153,.18), transparent); }

/* Welcome + headings */
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-client-welcome h1 { color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-client-welcome > div:first-child > p:last-child { color: #4a4560; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-client-welcome__status { background: #fff; border-color: rgba(17,24,39,.12); color: #4a4560; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-section-heading h2 { color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-current-service,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-section-count { background: rgba(17,24,39,.05); border-color: rgba(17,24,39,.12); color: #4a4560; }

/* Cards */
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-glass-card {
	background: #fff;
	border-color: rgba(17,24,39,.1);
	box-shadow: 0 10px 30px rgba(17,24,39,.06), inset 0 1px 0 rgba(255,255,255,.6);
}
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-summary-copy strong { color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-summary-copy span { color: #4a4560; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-summary-copy small { color: #6a6580; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-service-card { background: #fff; border-color: rgba(17,24,39,.1); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-service-card p { color: #5a5570; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-ready-state strong { color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-ready-state p { color: #5a5570; }

/* Progress tracker */
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-client-progress__chevron { background: rgba(17,24,39,.05); border-color: rgba(17,24,39,.1); color: #6a6580; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-client-progress li.is-completed .ppl-client-progress__chevron { color: #8a2e6e; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-progress-detail { border-top-color: rgba(17,24,39,.1); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-progress-detail__label { color: #6a6580; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-progress-detail strong { color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-progress-detail p { color: #5a5570; }

/* Deliverables table */
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-deliverables-table th { color: #6a6580; border-bottom-color: rgba(17,24,39,.1); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-deliverables-table td { border-bottom-color: rgba(17,24,39,.08); color: #3a3550; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-deliverables-table td:first-child { color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-deliverables-table td small { color: #7a7590; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-stage-pill { background: rgba(17,24,39,.05); border-color: rgba(17,24,39,.1); color: #5a5570; }

/* Support card */
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-support-card { background: #fff; border: 1px solid rgba(17,24,39,.1); }

/* Dropdowns become light */
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-dropdown { background: #fff; border-color: rgba(17,24,39,.12); box-shadow: 0 24px 60px rgba(17,24,39,.18); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-dropdown::before { border-bottom-color: #fff; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-dropdown__head { border-bottom-color: rgba(17,24,39,.1); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-dropdown__head h3,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-dropdown__empty strong,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-card__id strong,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-details dd,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-notif-item__meta strong,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-ledger-item__main strong { color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-dropdown__count { background: #f1f0f7; border-color: rgba(17,24,39,.1); color: #5a5570; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-card { border-bottom-color: rgba(17,24,39,.1); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-card__id span,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-details dt,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-notif-item__text,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-ledger-item__main span { color: #4a4560; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-details > div { border-bottom-color: rgba(17,24,39,.07); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-tab { color: #6a6580; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-tab:hover,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-tab.is-active { color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-notif-item { background: #f7f6fb; border-color: rgba(17,24,39,.08); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-notif-item:hover { background: rgba(240,0,153,.06); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-notif-item__meta span,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-notif-item__foot { color: #8a8598; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-ledger-item { background: #f7f6fb; border-color: rgba(17,24,39,.08); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-actions { border-top-color: rgba(17,24,39,.1); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-action { color: #2a2640; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-action:hover { background: rgba(240,0,153,.1); color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-action__icon { color: #c01f8f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-action--logout { color: #c62828; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-action--logout .ppl-profile-action__icon { color: #c62828; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-action--logout:hover { background: rgba(198,40,40,.09); color: #a01c1c; }

/* Light theme: buy / order screens */
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-buy-card,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-order-card { background: #fff; border-color: rgba(17,24,39,.1); box-shadow: 0 8px 22px rgba(17,24,39,.05); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-buy-card:hover,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-order-card:hover { border-color: rgba(240,0,153,.4); box-shadow: 0 16px 40px rgba(17,24,39,.1); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-buy-card__credits strong,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-buy-card__price,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-order-card h3,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-order-card__price { color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-buy-card__credits span,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-order-card__desc { color: #4a4560; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-buy-card__per,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-buy-note { color: #7a7590; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-buy-custom label { color: #4a4560; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-buy-custom input[type="number"] { background: #fff; border-color: rgba(17,24,39,.18); color: #12101f; }

/* Force profile action labels white (theme :visited link colors were dimming them) */
.ppl-client-dashboard .ppl-profile-action,
.ppl-client-dashboard .ppl-profile-action:link,
.ppl-client-dashboard .ppl-profile-action:visited { color: #ffffff; }
.ppl-client-dashboard .ppl-profile-action:hover,
.ppl-client-dashboard .ppl-profile-action:focus { color: #ffffff; }
.ppl-client-dashboard .ppl-profile-action__arrow { color: rgba(255,255,255,.55); }
.ppl-client-dashboard .ppl-profile-action:hover .ppl-profile-action__arrow { color: #ffffff; }
/* Keep the icons on brand */
.ppl-client-dashboard .ppl-profile-action__icon { color: #ff7cce; }
.ppl-client-dashboard .ppl-profile-action--logout .ppl-profile-action__icon { color: #ff8a8a; }

/* Light theme keeps dark, readable labels */
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-action,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-action:link,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-action:visited { color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-action--logout,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-action--logout:visited { color: #c62828; }

/* ==================================================================== */
/* Front-end profile form                                               */
/* ==================================================================== */

.ppl-profile-form__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.ppl-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ppl-field label { color: #cbc7d9; font-size: .78rem; font-weight: 600; }
.ppl-field input {
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 11px;
	color: #fff;
	font: inherit;
	font-size: .9rem;
	padding: 11px 13px;
	width: 100%;
	box-sizing: border-box;
}
.ppl-field input:focus { border-color: rgba(240,0,153,.5); box-shadow: 0 0 0 3px rgba(240,0,153,.1); outline: none; }
.ppl-field input:disabled { color: #9690a5; opacity: .8; }
.ppl-profile-form__section { border-top: 1px solid rgba(255,255,255,.1); margin-top: 22px; padding-top: 18px; }
.ppl-profile-form__section h3 { color: #fff; font-size: .98rem; margin: 0 0 4px; }
.ppl-profile-form__section > p { color: #8f899f; font-size: .78rem; margin: 0 0 14px; }
.ppl-profile-form__foot { margin-top: 22px; }

/* Light theme */
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-field label { color: #4a4560; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-field input { background: #fff; border-color: rgba(17,24,39,.18); color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-field input:disabled { color: #7a7590; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-form__section { border-top-color: rgba(17,24,39,.1); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-form__section h3 { color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-form__section > p { color: #6a6580; }

/* Light theme: fix low-contrast buttons (Contact Support, View Updates) */
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-client-help { background: #fff; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-client-help strong { color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-client-help a,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-client-help a:link,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-client-help a:visited {
	background: linear-gradient(100deg, #f0089c, #8b5cf6);
	border-color: transparent;
	color: #ffffff;
	font-weight: 700;
}
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-client-help a:hover { filter: brightness(1.05); }

.ppl-client-dashboard[data-ppl-theme="light"] .ppl-view-updates {
	background: rgba(240,0,153,.08);
	border-color: rgba(240,0,153,.3);
	color: #b81d86;
}
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-view-updates:hover { background: rgba(240,0,153,.14); border-color: rgba(240,0,153,.45); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-view-updates strong { background: #e0179c; color: #ffffff; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-summary-link { color: #c01f8f; }

/* Belt-and-braces for dark: keep the View Updates count legible everywhere */
.ppl-view-updates strong { background: rgba(240,0,153,.85); color: #ffffff; }

/* ==================================================================== */
/* Avatars: image → initials → icon, name-colour, status ring, sizes    */
/* ==================================================================== */

.ppl-av {
	--ppl-av-gap: #141024;
	align-items: center;
	background: var(--ppl-av-bg, #5b3df5);
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	flex: 0 0 auto;
	font-weight: 700;
	justify-content: center;
	line-height: 1;
	position: relative;
	text-transform: uppercase;
	vertical-align: middle;
}
.ppl-av__initials { position: relative; z-index: 1; }
.ppl-av__icon { align-items: center; display: inline-flex; justify-content: center; position: relative; width: 60%; z-index: 1; }
.ppl-av__icon svg { height: 100%; width: 100%; }
.ppl-av__img {
	border-radius: 50%;
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
	z-index: 2;
}

/* Three sizes and stop. */
.ppl-av--sm { font-size: .64rem; height: 28px; width: 28px; }
.ppl-av--md { font-size: .82rem; height: 38px; width: 38px; }
.ppl-av--lg { font-size: .98rem; height: 46px; width: 46px; }

/* Status lives on the ring — never a second badge. */
.ppl-av.is-online::after,
.ppl-av.is-offline::after {
	border-radius: 50%;
	content: "";
	inset: -3px;
	position: absolute;
	z-index: 3;
}
.ppl-av.is-online::after { border: 2px solid #35e59a; box-shadow: 0 0 8px rgba(53,229,154,.55); }
.ppl-av.is-offline::after { border: 2px solid rgba(160,156,180,.5); }

/* Group stack: overlap, spread on hover, remainder as +N. */
.ppl-av-stack { display: inline-flex; align-items: center; }
.ppl-av-stack .ppl-av { border: 2px solid var(--ppl-av-gap); margin-left: -9px; transition: margin-left .18s ease; }
.ppl-av-stack .ppl-av:first-child { margin-left: 0; }
.ppl-av-stack:hover .ppl-av { margin-left: 3px; }
.ppl-av-stack:hover .ppl-av:first-child { margin-left: 0; }
.ppl-av-stack .ppl-av:hover { z-index: 6; }
.ppl-av-more { background: rgba(255,255,255,.12); color: #d7d3e6; font-size: .62rem; }

/* Hover tooltip (only inside a stack) */
.ppl-av__tip {
	background: #221a34;
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 9px;
	bottom: calc(100% + 8px);
	box-shadow: 0 10px 24px rgba(0,0,0,.42);
	color: #fff;
	font-size: .7rem;
	font-weight: 600;
	left: 50%;
	opacity: 0;
	padding: 6px 9px;
	pointer-events: none;
	position: absolute;
	text-transform: none;
	transform: translateX(-50%) translateY(4px);
	transition: opacity .14s ease, transform .14s ease;
	white-space: nowrap;
	z-index: 10;
}
.ppl-av__tip strong { display: block; font-weight: 700; }
.ppl-av__tip small { color: #9b96ad; display: block; font-size: .62rem; font-weight: 500; margin-top: 1px; }
.ppl-av-stack .ppl-av:hover .ppl-av__tip { opacity: 1; transform: translateX(-50%) translateY(0); }

.ppl-deliverable-people { align-items: center; display: flex; gap: 9px; margin-top: 9px; }
.ppl-deliverable-people__label { color: var(--ppl-client-muted, #9690a5); font-size: .68rem; }

/* Topbar / profile chip use the new avatar; keep them sized in the chip */
.ppl-client-user .ppl-av { margin-right: 0; }
.ppl-profile-card .ppl-av { margin-right: 2px; }

/* Light theme adjustments */
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-av { --ppl-av-gap: #ffffff; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-av.is-offline::after { border-color: rgba(90,85,112,.4); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-av-more { background: rgba(17,24,39,.1); color: #4a4560; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-deliverable-people__label { color: #6a6580; }

/* Staff dashboard (light UI) stack separators + card foot layout */
.ppl-card__foot .ppl-av-stack { margin-left: auto; }
.ppl-card__foot .ppl-av-stack .ppl-av { --ppl-av-gap: #ffffff; }

/* ==================================================================== */
/* Checkout button: in-button spinner + success check                   */
/* ==================================================================== */

.ppl-client-button.is-loading,
.ppl-client-button.is-done {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	pointer-events: none;
}
.ppl-btn-spinner {
	border: 2.5px solid rgba(255,255,255,.35);
	border-top-color: #fff;
	border-radius: 50%;
	display: inline-block;
	height: 17px;
	width: 17px;
	animation: ppl-btn-spin .6s linear infinite;
}
.ppl-client-button.is-done { background: linear-gradient(100deg, #16a34a, #35e59a) !important; }
.ppl-btn-check { color: #fff; font-size: 1.1rem; font-weight: 800; line-height: 1; }
@keyframes ppl-btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ppl-btn-spinner { animation-duration: 1.4s; } }

.ppl-checkout-error {
	color: #ff8686;
	font-size: .74rem;
	font-weight: 600;
	margin: 10px 0 0;
	text-align: center;
}
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-checkout-error { color: #c62828; }

/* ==================================================================== */
/* Notification surfaces: toast / banner / modal                        */
/* ==================================================================== */

.ppl-toast-layer {
	bottom: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: min(92vw, 380px);
	position: fixed;
	right: 22px;
	z-index: 100001;
}
.ppl-toast {
	align-items: center;
	background: #211a33;
	border: 1px solid rgba(255,255,255,.12);
	border-left: 4px solid #8b5cf6;
	border-radius: 12px;
	box-shadow: 0 14px 34px rgba(0,0,0,.34);
	color: #fff;
	display: flex;
	gap: 12px;
	opacity: 0;
	padding: 13px 14px;
	transform: translateY(10px);
	transition: opacity .2s ease, transform .2s ease;
}
.ppl-toast.is-in { opacity: 1; transform: translateY(0); }
.ppl-toast--success { border-left-color: #35e59a; }
.ppl-toast--error { border-left-color: #ff6b6b; }
.ppl-toast--info { border-left-color: #38bdf8; }
.ppl-toast__msg { flex: 1; font-size: .82rem; line-height: 1.45; }
.ppl-toast__undo { background: transparent; border: 0; color: #7cc4ff; cursor: pointer; font: inherit; font-size: .78rem; font-weight: 700; padding: 0; }
.ppl-toast__x { background: transparent; border: 0; color: #9690a5; cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 0 2px; }
.ppl-toast__x:hover { color: #fff; }

.ppl-banner-layer { left: 0; position: sticky; right: 0; top: 0; z-index: 100000; }
.ppl-banner {
	align-items: center;
	background: #3a1113;
	border-bottom: 1px solid rgba(255,107,107,.4);
	color: #ffd9d9;
	display: flex;
	gap: 16px;
	justify-content: center;
	padding: 12px 44px 12px 18px;
	position: relative;
	text-align: center;
}
.ppl-banner--error { background: #3a1113; }
.ppl-banner--warn { background: #3a2c0e; border-bottom-color: rgba(245,158,11,.4); color: #ffe6b3; }
.ppl-banner__msg { font-size: .84rem; font-weight: 600; }
.ppl-banner__x { background: transparent; border: 0; color: inherit; cursor: pointer; font-size: 1.3rem; line-height: 1; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }

.ppl-note-modal {
	align-items: center;
	background: rgba(5,4,12,.72);
	backdrop-filter: blur(6px);
	display: flex;
	inset: 0;
	justify-content: center;
	opacity: 0;
	padding: 20px;
	position: fixed;
	transition: opacity .18s ease;
	z-index: 100002;
}
.ppl-note-modal.is-open { opacity: 1; }
.ppl-note-modal__panel {
	background: #211a33;
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 16px;
	box-shadow: 0 30px 70px rgba(0,0,0,.5);
	color: #fff;
	max-width: 420px;
	padding: 24px;
	transform: translateY(8px) scale(.98);
	transition: transform .18s ease;
	width: 100%;
}
.ppl-note-modal.is-open .ppl-note-modal__panel { transform: none; }
.ppl-note-modal__panel h3 { color: #fff; font-size: 1.1rem; margin: 0 0 8px; }
.ppl-note-modal__panel p { color: #d7d3e2; font-size: .86rem; line-height: 1.55; margin: 0 0 18px; }
.ppl-note-modal__actions { display: flex; gap: 10px; justify-content: flex-end; }
.ppl-note-modal__btn { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 10px; color: #fff; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 700; padding: 9px 16px; }
.ppl-note-modal__btn.is-primary { background: linear-gradient(100deg, #f09, #8b5cf6); border-color: transparent; }
.ppl-note-modal__btn:hover { filter: brightness(1.06); }

/* View-details confirm modal — a small key/value list of what's about to
   be submitted, shown before the underlying form actually goes through. */
.ppl-confirm-row {
	border-bottom: 1px solid rgba(255,255,255,.08);
	display: flex;
	font-size: .84rem;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
}
.ppl-confirm-row:last-child { border-bottom: 0; margin-bottom: 14px; }
.ppl-confirm-row span { color: #b8b3c9; }
.ppl-confirm-row strong { color: #fff; text-align: right; }

@media (prefers-reduced-motion: reduce) {
	.ppl-toast, .ppl-note-modal, .ppl-note-modal__panel { transition: none; }
}

/* ==================================================================== */
/* Profile dropdown — industry-standard layout fixes                    */
/* ==================================================================== */

/* Let the scroll region flex so the details never clip behind the footer */
.ppl-profile-dropdown .ppl-dropdown__scroll { flex: 1 1 auto; min-height: 0; }

/* Header: avatar + name + email once, name wraps instead of truncating */
.ppl-profile-card { gap: 14px; padding: 18px 18px 16px; }
.ppl-profile-card .ppl-av { flex: 0 0 auto; }
.ppl-profile-card__id { flex: 1 1 auto; min-width: 0; }
.ppl-profile-card__id strong {
	color: #fff;
	display: block;
	font-size: 1rem;
	line-height: 1.25;
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
	word-break: break-word;
}
.ppl-profile-card__id span {
	color: #9690a5;
	display: block;
	font-size: .76rem;
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Tighter, cleaner detail rows */
.ppl-profile-panel[data-ppl-tabpanel="profile"] { padding: 4px 2px; }
.ppl-profile-details > div { padding: 10px 10px; }
.ppl-profile-details dt { color: #9690a5; font-size: .76rem; }
.ppl-profile-details dd { color: #fff; font-size: .82rem; font-weight: 600; }

/* Light theme header name */
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-card__id strong { color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-card__id span { color: #6a6580; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-details dd { color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-details dt { color: #6a6580; }

/* ==================================================================== */
/* Avatar online-status dot (clear presence icon; replaces the ring)    */
/* ==================================================================== */

.ppl-av.is-online::after,
.ppl-av.is-offline::after { display: none; } /* drop the ring in favour of a dot */

.ppl-av__status {
	background: #9aa0ae;
	border: 2px solid var(--ppl-av-gap, #141024);
	border-radius: 50%;
	bottom: -1px;
	height: 32%;
	max-height: 13px;
	max-width: 13px;
	min-height: 9px;
	min-width: 9px;
	position: absolute;
	right: -1px;
	width: 32%;
	z-index: 4;
}
.ppl-av__status.is-online { background: #35e59a; box-shadow: 0 0 6px rgba(53,229,154,.6); }

/* Fix: the custom hover tooltip is clipped inside the scrollable
   deliverables table — rely on the native title there instead. */
.ppl-deliverables-table .ppl-av__tip,
.ppl-deliverable-people .ppl-av__tip { display: none !important; }
.ppl-deliverable-people { flex-wrap: wrap; }

/* Light theme dot gap matches the light surfaces */
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-av__status { border-color: var(--ppl-av-gap, #ffffff); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-av__status { background: #b4b0c0; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-av__status.is-online { background: #22c55e; }

/* ==================================================================== */
/* View details button + deliverable details modal                     */
/* ==================================================================== */

.ppl-view-details {
	align-items: center;
	background: transparent;
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 9px;
	color: #cbc7d9;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: .7rem;
	font-weight: 700;
	gap: 6px;
	margin-top: 9px;
	padding: 7px 11px;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ppl-view-details svg { height: 14px; width: 14px; }
.ppl-view-details:hover { background: rgba(255,255,255,.06); border-color: rgba(240,0,153,.35); color: #fff; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-view-details { border-color: rgba(17,24,39,.15); color: #4a4560; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-view-details:hover { background: rgba(240,0,153,.06); border-color: rgba(240,0,153,.4); color: #12101f; }

.ppl-details-section { padding: 4px 0 16px; }
.ppl-details-section + .ppl-details-section { border-top: 1px solid rgba(255,255,255,.08); padding-top: 16px; }
.ppl-details-section h3 { color: #ff5fc1; font-size: .64rem; font-weight: 900; letter-spacing: .12em; margin: 0 0 9px; text-transform: uppercase; }
.ppl-details-desc { color: #d9d5e3; font-size: .84rem; line-height: 1.6; margin: 0; }
.ppl-details-desc--empty { color: #8f899f; font-style: italic; }

.ppl-details-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0,1fr)); padding-bottom: 16px; }
.ppl-details-fact { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 11px; padding: 10px 12px; }
.ppl-details-fact span { color: #9690a5; display: block; font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; }
.ppl-details-fact strong { color: #fff; display: block; font-size: .84rem; margin-top: 3px; }

.ppl-details-people { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ppl-details-person { align-items: center; display: flex; gap: 10px; }
.ppl-details-person__dot { background: #9aa0ae; border-radius: 50%; flex: 0 0 9px; height: 9px; width: 9px; }
.ppl-details-person__dot.is-online { background: #35e59a; box-shadow: 0 0 6px rgba(53,229,154,.55); }
.ppl-details-person__name { color: #fff; font-size: .82rem; font-weight: 600; }
.ppl-details-person__status { color: #857f95; font-size: .68rem; margin-left: auto; }

/* ==================================================================== */
/* Your Work: Service -> Episode (accordion + % bar) -> Deliverables    */
/* ==================================================================== */

.ppl-work { display: grid; gap: 22px; }
.ppl-work-group__name { align-items: center; color: #fff !important; display: flex; font-size: .95rem; font-weight: 700; gap: 8px; letter-spacing: -.01em; margin: 0 0 12px; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-work-group__name { color: #12101f !important; }
.ppl-work-group__name span { color: #ff5bc0; flex: 0 0 auto; }

.ppl-episodes { display: grid; gap: 8px; }
.ppl-episode { border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: rgba(255,255,255,.03); overflow: hidden; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-episode { border-color: rgba(17,24,39,.1); background: #fff; }
.ppl-episode[hidden] { display: none; }

.ppl-episode__head {
	align-items: center;
	background: transparent;
	color: inherit;
	display: flex;
	gap: 12px;
	padding: 13px 15px;
	text-align: left;
	width: 100%;
}
.ppl-episode__toggle-btn {
	align-items: center;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 999px;
	color: #e9e5f4;
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	font: inherit;
	font-size: .76rem;
	font-weight: 600;
	gap: 6px;
	padding: 5px 12px;
}
.ppl-episode__toggle-btn:hover { background: rgba(255,255,255,.1); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-episode__toggle-btn { background: rgba(17,24,39,.05); border-color: rgba(17,24,39,.14); color: #2a2640; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-episode__toggle-btn:hover { background: rgba(17,24,39,.09); }
.ppl-episode__caret { color: #9690a5; display: inline-flex; flex: 0 0 auto; transition: transform .18s ease; }
.ppl-episode__caret svg { height: 15px; width: 15px; }
.ppl-episode__toggle-btn[aria-expanded="true"] .ppl-episode__caret { transform: rotate(90deg); }
.ppl-episode__title {
	background: none;
	border: 0;
	color: #fff;
	cursor: pointer;
	flex: 0 1 auto;
	font: inherit;
	font-size: .88rem;
	font-weight: 600;
	min-width: 0;
	overflow: hidden;
	padding: 0;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ppl-episode__title:hover { text-decoration: underline; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-episode__title { color: #12101f; }

.ppl-work-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 22px 18px; }
.ppl-work-nav__item {
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 999px;
	color: #e9e5f4;
	cursor: pointer;
	font: inherit;
	font-size: .76rem;
	font-weight: 700;
	max-width: 220px;
	overflow: hidden;
	padding: 7px 14px;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ppl-work-nav__item:hover { background: rgba(255,255,255,.1); color: #fff; }
.ppl-work-nav__item.is-active { background: linear-gradient(100deg, #f09, #8b5cf6); border-color: transparent; color: #fff; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-work-nav__item { background: rgba(17,24,39,.04); border-color: rgba(17,24,39,.14); color: #2a2640; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-work-nav__item:hover { background: rgba(17,24,39,.09); }
.ppl-episode__spacer { flex: 1 1 auto; }
.ppl-episode__bar { background: rgba(255,255,255,.1); border-radius: 999px; flex: 0 0 120px; height: 7px; overflow: hidden; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-episode__bar { background: rgba(17,24,39,.1); }
.ppl-episode__bar-fill { background: linear-gradient(90deg, #f09, #8b5cf6); border-radius: 999px; display: block; height: 100%; overflow: hidden; position: relative; transition: width .3s ease; }
/* Moving sheen across the filled portion of the progress bar. */
.ppl-episode__bar-fill::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 55%;
	background: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 80%);
	animation: ppl-bar-shine 2.4s ease-in-out infinite;
}
@keyframes ppl-bar-shine { 0% { left: -60%; } 60% { left: 115%; } 100% { left: 115%; } }
@media (prefers-reduced-motion: reduce) { .ppl-episode__bar-fill::after { animation: none; opacity: 0; } }
.ppl-episode__pct { color: #cbc7d9; flex: 0 0 auto; font-size: .74rem; font-weight: 700; min-width: 34px; text-align: right; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-episode__pct { color: #4a4560; }

.ppl-episode__body { border-top: 1px solid rgba(255,255,255,.08); padding: 12px 15px 14px; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-episode__body { border-top-color: rgba(17,24,39,.08); }
.ppl-episode__body[hidden] { display: none; }
.ppl-episode__toolbar { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin-bottom: 10px; }
.ppl-episode__count { color: #9690a5; font-size: .72rem; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-episode__count { color: #6a6580; }

.ppl-deliverable-rows { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ppl-deliverable-row {
	align-items: center;
	column-gap: 14px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	padding: 12px 4px;
	row-gap: 12px;
}
.ppl-deliverable-row + .ppl-deliverable-row { border-top: 1px solid rgba(255,255,255,.06); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-deliverable-row + .ppl-deliverable-row { border-top-color: rgba(17,24,39,.07); }
.ppl-deliverable-row__name { color: #e9e5f4; font-size: .84rem; font-weight: 600; grid-column: 1; grid-row: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-deliverable-row__name { color: #2a2640; }
.ppl-deliverable-row .ppl-view-updates { align-self: center; flex: 0 0 auto; grid-column: 2; grid-row: 1; }
/* The chevron status track sits on its own full-width line beneath the name. */
.ppl-deliverable-row .ppl-tracker__steps--compact { grid-column: 1 / -1; grid-row: 2; }

/* Compact chevron track (subtask status + inside View details). */
/* Pending/label colours are re-scoped so the chevrons read on the dark card
   (the base --ppl-line/muted/faint are tuned for light surfaces). */
.ppl-tracker__steps--compact {
	--ppl-line: rgba(255,255,255,.09);
	--ppl-muted: #d3cfe0;
	--ppl-faint: #948fa6;
}
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-tracker__steps--compact {
	--ppl-line: #eceaf3;
	--ppl-muted: #4a4560;
	--ppl-faint: #8a8598;
}
.ppl-tracker__steps--compact { gap: 3px; margin: 0; padding: 0; }
.ppl-tracker__steps--compact .ppl-tracker__step { min-width: 84px; }
.ppl-tracker__steps--compact .ppl-tracker__chev { min-height: 30px; padding: 6px calc(var(--ppl-notch) + 6px); }
.ppl-tracker__steps--compact .ppl-tracker__label { font-size: .6rem; letter-spacing: .05em; }
.ppl-tracker__steps--compact .ppl-tracker__tick,
.ppl-tracker__steps--compact .ppl-tracker__tick svg { height: 11px; width: 11px; }
@media (max-width: 640px) {
	.ppl-tracker__steps--compact { flex-direction: column; gap: 5px; overflow-x: visible; }
	.ppl-tracker__steps--compact .ppl-tracker__step { min-width: 0; text-align: left; }
	.ppl-tracker__steps--compact .ppl-tracker__chev,
	.ppl-tracker__steps--compact .ppl-tracker__step:first-child .ppl-tracker__chev,
	.ppl-tracker__steps--compact .ppl-tracker__step:last-child .ppl-tracker__chev {
		border-radius: 8px; clip-path: none; justify-content: flex-start; padding: 8px 12px;
	}
}

.ppl-episodes__pager { align-items: center; display: flex; gap: 12px; justify-content: center; margin-top: 12px; }
.ppl-episodes__pager[hidden] { display: none; }
.ppl-pager__btn { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 9px; color: #cbc7d9; cursor: pointer; font: inherit; font-size: .74rem; font-weight: 700; padding: 6px 12px; }
.ppl-pager__btn:disabled { cursor: default; opacity: .4; }
.ppl-pager__info { color: #9690a5; font-size: .72rem; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-pager__btn { background: #fff; border-color: rgba(17,24,39,.15); color: #4a4560; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-pager__info { color: #6a6580; }

/* Episode details modal: table layout, no select/select-all — see the
   .ppl-mrow-table rules earlier in this file. */
.ppl-episode__bar--modal { border-radius: 0 !important; flex: none !important; height: 4px !important; }

/* ==================================================================== */
/* Staff queue: Episode card -> deliverable rows (light UI)             */
/* ==================================================================== */

.ppl-page .ppl-card__head { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; }
.ppl-page .ppl-card__progress { align-items: center; display: flex; flex: 0 0 auto; gap: 10px; }
.ppl-page .ppl-card__progress .ppl-episode__bar { background: rgba(17,24,39,.1); flex: 0 0 130px; }
.ppl-page .ppl-card__progress .ppl-episode__pct { color: var(--ppl-ink, #111827); }

.ppl-staff-deliverables { display: grid; gap: 8px; margin-top: 14px; }
.ppl-staff-row {
	align-items: center;
	background: var(--ppl-canvas, #f4f5fa);
	border: 1px solid var(--ppl-line, #e5e7eb);
	border-radius: 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 11px 13px;
}
.ppl-staff-row__main { flex: 1 1 220px; min-width: 0; }
.ppl-staff-row__main strong { color: var(--ppl-ink, #111827); display: block; font-size: .9rem; }
.ppl-staff-row__meta { color: var(--ppl-muted, #6b7280); display: block; font-size: .74rem; margin-top: 2px; }
.ppl-staff-row .ppl-inline { align-items: center; display: flex; gap: 8px; margin: 0; }
.ppl-staff-row .ppl-inline select { max-width: 160px; }
.ppl-staff-row .ppl-view-updates {
	background: var(--ppl-brand-soft, #ede9ff);
	border: 1px solid rgba(91,61,245,.28);
	border-radius: 10px;
	color: #5b3df5;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font: inherit;
	font-size: .72rem;
	font-weight: 800;
	padding: 8px 11px;
}
.ppl-staff-row .ppl-view-updates:hover { background: #e4defc; }
.ppl-staff-row .ppl-view-updates strong { background: #5b3df5; border-radius: 999px; color: #fff; font-size: .62rem; min-width: 18px; padding: 1px 5px; text-align: center; }
.ppl-page .ppl-foot-note { color: var(--ppl-warn, #b45309); }
.ppl-page .ppl-card__foot { display: flex; margin-top: 12px; }

/* Empty state for an activated service with no episodes yet */
.ppl-episode-empty { color: #b6b1c6; font-size: .8rem; font-style: italic; margin: 2px 0 10px; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-episode-empty { color: #6a6580; }
/* Redeem-with-credits button on the order page */
.ppl-order-card__redeem { margin-top: 8px; }
.ppl-order-card__credits-btn { background: rgba(53,229,154,.12); border: 1px solid rgba(53,229,154,.4); border-radius: 10px; color: #47eaa1; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 700; padding: 9px 12px; width: 100%; }
.ppl-order-card__credits-btn:disabled { cursor: default; opacity: .45; }
.ppl-order-card__credits-note { color: #8f899f; display: block; font-size: .68rem; margin-top: 5px; text-align: center; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-order-card__credits-btn { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.35); color: #15803d; }

/* ==================================================================== */
/* Service catalogue (Buy credits) + episode quantity selector          */
/* ==================================================================== */

.ppl-svc-card {
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
}
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-svc-card { background: #fff; border-color: rgba(17,24,39,.1); }
.ppl-svc-card__icon {
	align-items: center;
	background: rgba(240,0,153,.13);
	border: 1px solid rgba(240,0,153,.27);
	border-radius: 12px;
	color: #ff62c3;
	display: flex;
	font-size: 1.2rem;
	height: 44px;
	justify-content: center;
	width: 44px;
}
.ppl-svc-card__name { color: #fff; font-size: 1rem; font-weight: 700; margin: 4px 0 0; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-svc-card__name { color: #12101f; }
.ppl-svc-card__desc { color: #b6b1c6; font-size: .8rem; line-height: 1.5; margin: 0; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-svc-card__desc { color: #5a5570; }
.ppl-svc-card__price { align-items: baseline; display: flex; gap: 6px; margin-top: 6px; }
.ppl-svc-card__price strong { color: #fff; font-size: 1.7rem; line-height: 1; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-svc-card__price strong { color: #12101f; }
.ppl-svc-card__price span { color: #9690a5; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ppl-svc-card__meta { color: #cbc7d9; display: grid; font-size: .76rem; gap: 3px; list-style: none; margin: 6px 0 0; padding: 0; }
.ppl-svc-card__meta li { align-items: center; display: flex; gap: 7px; }
.ppl-svc-card__meta li::before { background: #ff5bc0; border-radius: 50%; content: ""; flex: 0 0 5px; height: 5px; width: 5px; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-svc-card__meta { color: #4a4560; }
.ppl-svc-card__cta { margin-top: auto; text-align: center; }

.ppl-addon-note {
	align-items: center;
	background: rgba(139,92,246,.08);
	border: 1px solid rgba(139,92,246,.22);
	border-radius: 14px;
	display: flex;
	gap: 14px;
	margin-top: 16px;
	padding: 16px 18px;
}
.ppl-addon-note__icon {
	align-items: center;
	background: rgba(139,92,246,.18);
	border-radius: 10px;
	color: #c4b5fd;
	display: flex;
	flex: 0 0 auto;
	font-size: 1.3rem;
	font-weight: 700;
	height: 40px;
	justify-content: center;
	width: 40px;
}
.ppl-addon-note strong { color: #fff; display: block; font-size: .88rem; }
.ppl-addon-note p { color: #b6b1c6; font-size: .78rem; line-height: 1.5; margin: 3px 0 0; }
.ppl-addon-note .ppl-client-button { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-addon-note strong { color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-addon-note p { color: #5a5570; }
@media (max-width: 640px) {
	.ppl-addon-note { flex-wrap: wrap; }
	.ppl-addon-note .ppl-client-button { margin-left: 0; width: 100%; }
}

.ppl-buy-divider { align-items: center; color: #8f8a9e; display: flex; gap: 14px; margin: 26px 0 6px; }
.ppl-buy-divider::before, .ppl-buy-divider::after { background: rgba(255,255,255,.12); content: ""; flex: 1 1 auto; height: 1px; }
.ppl-buy-divider span { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-buy-divider { color: #6a6580; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-buy-divider::before, .ppl-client-dashboard[data-ppl-theme="light"] .ppl-buy-divider::after { background: rgba(17,24,39,.12); }

/* Episode quantity selector on the order card. */
.ppl-order-card__eplabel { color: #cbc7d9; display: block; font-size: .72rem; font-weight: 700; margin: 8px 0 5px; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-order-card__eplabel { color: #4a4560; }
.ppl-order-card__epselect {
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 9px;
	color: #fff;
	font: inherit;
	font-size: .82rem;
	margin-bottom: 8px;
	padding: 8px 10px;
	width: 100%;
}
/* The dropdown's own popup — its height and whether it opens above or
   below the field — is drawn by the browser/OS, not by this stylesheet;
   no standard CSS property can reliably override that for a native
   <select> across browsers (in practice, browsers already cap the
   popup's height to the viewport and default to opening below unless
   there isn't room, which covers what was actually being asked for here).
   What IS reliably styleable is the option background itself — several
   browsers otherwise render <option> with a plain white/system
   background regardless of the select's own dark background above,
   which is what actually looked broken against this UI. */
.ppl-order-card__epselect option {
	background: #1a1625;
	color: #fff;
	padding: 6px 10px;
}
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-order-card__epselect { background: #fff; border-color: rgba(17,24,39,.18); color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-order-card__epselect option { background: #fff; color: #12101f; }
.ppl-order-card__epfixed { color: #9690a5; font-size: .72rem; margin: 6px 0 8px; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-order-card__epfixed { color: #6a6580; }
[data-ppl-redeem-note][hidden] { display: none; }

/* Stripe pricing tables on the Buy credits page. */
.ppl-plan-group__name { color: #fff; font-size: .9rem; font-weight: 700; margin: 14px 0 8px; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plan-group__name { color: #12101f; }

/* ==================================================================== */
/* v1.12 — Subscriptions (Monthly / Yearly), service actions, details    */
/* modal. Everything here reuses the dashboard's glass-card language:    */
/* the same radii, the same 1px line, the same pink→violet accent, so    */
/* the Buy screen reads as one surface with the rest of the portal.      */
/* ==================================================================== */

/* --- Plans card ----------------------------------------------------- */
.ppl-plans-card { padding: 22px; }
.ppl-plans-card .ppl-section-heading {
	align-items: center;
	column-gap: 18px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 18px;
	row-gap: 12px;
}

/* Segmented Monthly | Yearly switch. A single pill with a lit segment —
   the same shape as the sidebar's active item, so it reads as native. */
.ppl-billing-switch {
	background: rgba(255,255,255,.05);
	border: 1px solid var(--ppl-client-line, rgba(255,255,255,.1));
	border-radius: 999px;
	display: inline-flex;
	flex: 0 0 auto;
	gap: 4px;
	padding: 4px;
}
.ppl-billing-switch__btn {
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: #b8b3c9;
	cursor: pointer;
	font: inherit;
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .02em;
	line-height: 1;
	padding: 9px 18px;
	transition: background .18s ease, color .18s ease, box-shadow .18s ease;
	white-space: nowrap;
}
.ppl-billing-switch__btn:hover { color: #fff; }
.ppl-billing-switch__btn.is-active {
	background: linear-gradient(100deg, #f09, #8b5cf6);
	box-shadow: 0 8px 20px rgba(240,0,153,.24);
	color: #fff;
}
.ppl-billing-switch__btn:focus-visible {
	outline: 2px solid #ff8ad0;
	outline-offset: 2px;
}

/* Panels. Only the active one is in flow; `hidden` does the hiding, this
   just guarantees it even if a stylesheet elsewhere sets display. */
.ppl-billing-panel[hidden] { display: none !important; }
.ppl-billing-panel.is-plain { margin-top: 6px; }
.ppl-plan-group__name {
	color: #fff;
	font-size: .82rem;
	font-weight: 800;
	letter-spacing: .06em;
	margin: 0 0 10px;
	text-transform: uppercase;
}
.ppl-billing-panel > .ppl-plan-group__name:not(:first-child) { margin-top: 26px; }

.ppl-plans-card .ppl-buy-note { margin: 14px 0 0; }

.ppl-client-dashboard[data-ppl-theme="light"] .ppl-billing-switch {
	background: rgba(17,24,39,.04);
	border-color: rgba(17,24,39,.1);
}
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-billing-switch__btn { color: #5a5570; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-billing-switch__btn:hover { color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-billing-switch__btn.is-active { color: #fff; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plan-group__name { color: #12101f; }

@media (max-width: 640px) {
	.ppl-billing-switch { width: 100%; }
	.ppl-billing-switch__btn { flex: 1 1 0; padding: 10px 12px; text-align: center; }
}

/* --- Ghost button variant + small size ------------------------------ */
.ppl-client-button.is-ghost {
	background: rgba(255,255,255,.05);
	border: 1px solid var(--ppl-client-line, rgba(255,255,255,.12));
	box-shadow: none;
	color: #d9d5e5;
}
.ppl-client-button.is-ghost:hover {
	background: rgba(255,255,255,.09);
	border-color: rgba(240,0,153,.4);
	color: #fff;
	filter: none;
}
.ppl-client-button--sm { font-size: .68rem; padding: 8px 12px; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-client-button.is-ghost {
	background: #fff;
	border-color: rgba(17,24,39,.14);
	color: #3d3856;
}
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-client-button.is-ghost:hover { color: #12101f; }

/* --- Service card actions ------------------------------------------- */
.ppl-svc-card__actions {
	display: grid;
	gap: 8px;
	grid-template-columns: 1fr auto;
	margin-top: auto;
	padding-top: 14px;
}
.ppl-svc-card__actions .ppl-client-button {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	margin-top: 0;
	text-align: center;
	white-space: nowrap;
}
.ppl-svc-card__short { color: #ff8ad0; font-size: .7rem; font-weight: 700; margin: 8px 0 0; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-svc-card__short { color: #b3187f; }

@media (max-width: 480px) {
	.ppl-svc-card__actions { grid-template-columns: 1fr; }
}

/* Dashboard "Your Services" cards: the body is now a column so the actions
   sit on a shared baseline instead of hugging whatever text is above. */
.ppl-service-card { align-items: flex-start; }
.ppl-service-card__body { display: flex; flex-direction: column; min-width: 0; width: 100%; }
.ppl-service-card__body > span { margin-bottom: 12px; }
.ppl-service-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
}
.ppl-service-card__actions .ppl-client-button { flex: 0 0 auto; }
.ppl-service-card__icon { flex: 0 0 38px; }

@media (max-width: 480px) {
	.ppl-service-card__actions .ppl-client-button { flex: 1 1 100%; text-align: center; }
}

/* --- Service details modal ------------------------------------------ */
.ppl-modal[hidden] { display: none !important; }
.ppl-modal {
	align-items: center;
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 20px;
	position: fixed;
	z-index: 100000;
}
.ppl-modal__backdrop {
	background: rgba(8,6,18,.72);
	backdrop-filter: blur(3px);
	inset: 0;
	position: absolute;
}
.ppl-modal__panel {
	background: #17142a;
	border: 1px solid var(--ppl-client-line, rgba(255,255,255,.12));
	border-radius: 20px;
	box-shadow: 0 32px 80px rgba(0,0,0,.5);
	max-height: calc(100vh - 40px);
	max-width: 440px;
	overflow-y: auto;
	padding: 26px;
	position: relative;
	width: 100%;
}
.ppl-modal__close {
	appearance: none;
	background: rgba(255,255,255,.06);
	border: 0;
	border-radius: 9px;
	color: #cfc9de;
	cursor: pointer;
	font-size: 1.2rem;
	height: 30px;
	line-height: 1;
	position: absolute;
	right: 16px;
	top: 16px;
	width: 30px;
}
.ppl-modal__close:hover { background: rgba(255,255,255,.12); color: #fff; }
.ppl-modal__panel h3 { color: #fff; font-size: 1.15rem; margin: 4px 40px 0 0; }
.ppl-modal__desc { color: #b6b1c6; font-size: .82rem; line-height: 1.6; margin: 10px 0 0; }
.ppl-modal__facts {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(2, minmax(0,1fr));
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}
.ppl-modal__facts li {
	background: rgba(255,255,255,.04);
	border: 1px solid var(--ppl-client-line, rgba(255,255,255,.1));
	border-radius: 12px;
	min-width: 0;
	padding: 11px 12px;
}
.ppl-modal__facts strong { color: #fff; display: block; font-size: .98rem; overflow-wrap: anywhere; }
.ppl-modal__facts span { color: #9690a5; display: block; font-size: .68rem; letter-spacing: .04em; margin-top: 3px; text-transform: uppercase; }
.ppl-modal__cta {
	align-items: center;
	display: flex;
	justify-content: center;
	margin-top: 18px;
	width: 100%;
}
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-modal__panel { background: #fff; border-color: rgba(17,24,39,.12); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-modal__panel h3,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-modal__facts strong { color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-modal__desc { color: #5a5570; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-modal__facts li { background: rgba(17,24,39,.03); border-color: rgba(17,24,39,.1); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-modal__close { background: rgba(17,24,39,.06); color: #3d3856; }

@media (max-width: 420px) {
	.ppl-modal__facts { grid-template-columns: 1fr; }
}

/* --- Buy screen rhythm ---------------------------------------------- */
/* Consistent vertical spacing between the stacked sections, and cards that
   never let a long service name push a price out past the border. */
.ppl-client-content > .ppl-glass-card + .ppl-glass-card,
.ppl-client-content > .ppl-glass-card + .ppl-buy-divider { margin-top: 18px; }
.ppl-buy-grid { align-items: stretch; }
.ppl-buy-card, .ppl-svc-card, .ppl-order-card { min-width: 0; }
.ppl-svc-card__name, .ppl-svc-card__desc, .ppl-order-card h3 { overflow-wrap: anywhere; }
.ppl-client-content > .ppl-buy-divider { margin: 26px 0 6px; }

/* ==================================================================== */
/* v1.13 — Live Stripe catalogue cards.                                  */
/* One card per Stripe price. Everything shown is read from Stripe, so   */
/* the card has to cope with whatever a product is named over there:     */
/* long names wrap, the price and credits keep their own baseline, and   */
/* the CTA is pinned to the bottom so a row of cards lines up whatever   */
/* the description length.                                               */
/* ==================================================================== */
.ppl-plan-card {
	background: rgba(255,255,255,.045);
	border: 1px solid var(--ppl-client-line, rgba(255,255,255,.1));
	border-radius: 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding: 20px;
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ppl-plan-card:hover {
	border-color: rgba(240,0,153,.4);
	box-shadow: 0 18px 44px rgba(0,0,0,.28);
	transform: translateY(-2px);
}
.ppl-plan-card__name {
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	margin: 0;
	overflow-wrap: anywhere;
}
.ppl-plan-card__desc {
	color: #b6b1c6;
	font-size: .8rem;
	line-height: 1.5;
	margin: 0;
	overflow-wrap: anywhere;
}
.ppl-plan-card__price { align-items: baseline; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ppl-plan-card__price strong { color: #fff; font-size: 1.9rem; letter-spacing: -.03em; line-height: 1; }
.ppl-plan-card__price span { color: #9690a5; font-size: .78rem; font-weight: 700; }
.ppl-plan-card__credits { align-items: baseline; display: flex; flex-wrap: wrap; gap: 6px; }
.ppl-plan-card__credits strong { color: #ff8ad0; font-size: 1.05rem; font-weight: 800; }
.ppl-plan-card__credits span { color: #b8b3c9; font-size: .76rem; }
.ppl-plan-card__per { color: #8f899f; font-size: .72rem; margin: 2px 0 0; }
.ppl-plan-card__cta { margin-top: auto; padding-top: 14px; }
.ppl-plan-card__cta.ppl-client-button { align-items: center; display: flex; justify-content: center; margin-top: auto; width: 100%; }

.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plan-card { background: #fff; border-color: rgba(17,24,39,.1); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plan-card__name,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plan-card__price strong { color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plan-card__desc { color: #5a5570; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plan-card__credits strong { color: #b3187f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plan-card__credits span { color: #4a4560; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plan-card__per { color: #6a6580; }

/* The panels hold a card grid now rather than a Stripe embed. */
.ppl-billing-panel > .ppl-buy-grid { margin: 0; }

/* --- Featured plan ---------------------------------------------------- */
/* A plan tagged `portal_featured` in Stripe gets the treatment a pricing
   table gives its highlighted column: a lit border, a badge, and enough
   lift to read as the recommended choice without shouting. */
.ppl-plan-card__badge {
	align-self: flex-start;
	background: rgba(240,0,153,.14);
	border: 1px solid rgba(240,0,153,.3);
	border-radius: 999px;
	color: #ff8ad0;
	font-size: .64rem;
	font-weight: 800;
	letter-spacing: .08em;
	padding: 4px 10px;
	text-transform: uppercase;
}
.ppl-plan-card.is-featured {
	background: linear-gradient(165deg, rgba(240,0,153,.10), rgba(139,92,246,.06));
	border-color: rgba(240,0,153,.45);
	box-shadow: 0 18px 44px rgba(240,0,153,.14);
}
.ppl-plan-card.is-featured:hover { border-color: rgba(240,0,153,.65); }

.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plan-card__badge {
	background: rgba(240,0,153,.08);
	border-color: rgba(240,0,153,.28);
	color: #b3187f;
}
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plan-card.is-featured {
	background: linear-gradient(165deg, rgba(240,0,153,.05), rgba(139,92,246,.04));
	border-color: rgba(240,0,153,.34);
}

/* --- Stripe pricing-table embed, inside a billing tab ------------------ */
/* The embed is Stripe's own web component and styles itself (its colours and
   fonts are set in Stripe → Display settings). All this does is give it a
   predictable box inside the card so it cannot bleed past the border or
   collide with the cards underneath it. */
.ppl-plan-embed {
	margin: 0 0 4px;
	max-width: 100%;
	min-width: 0;
	overflow-x: auto;
}
.ppl-plan-embed stripe-pricing-table { display: block; width: 100%; }
.ppl-billing-panel > .ppl-plan-group__name { margin-top: 4px; }
.ppl-billing-panel > .ppl-plan-group__name ~ .ppl-plan-group__name { margin-top: 22px; }

/* Separates a tab's pricing table from the catalogue cards below it, so the
   two do not read as one undifferentiated pile the way the old page did. */
.ppl-buy-divider--inset { margin: 20px 0 18px; }

/* ==================================================================== */
/* v1.16 — Buy credits full width, plan cards as a real pricing table.   */
/* ==================================================================== */

/* The portal content was centred inside a 1380px column. On a wide screen
   that left the plans squeezed into the middle with empty space either side —
   most visible on Buy credits, where four plans have to sit side by side. */
.ppl-client-content { max-width: 1680px; }
.ppl-buy-shell .ppl-client-content { max-width: none; }

@media (min-width: 1500px) {
	.ppl-client-content { padding-left: 44px; padding-right: 44px; }
}

/* The plan grid reads as a pricing table: equal columns, equal heights, and a
   column count that steps down with the viewport instead of reflowing into
   whatever auto-fit decides. Four across is the shape Stripe's own table uses
   and the shape these plans were written for. */
.ppl-billing-panel > .ppl-buy-grid {
	align-items: stretch;
	gap: 18px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1400px) { .ppl-billing-panel > .ppl-buy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1080px) { .ppl-billing-panel > .ppl-buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .ppl-billing-panel > .ppl-buy-grid { grid-template-columns: minmax(0, 1fr); } }

/* With three or fewer plans, four equal columns would strand them at the left
   at half width. Centre them instead and cap how wide any one card gets. */
.ppl-billing-panel > .ppl-buy-grid:has(> :last-child:nth-child(-n+3)) {
	grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
	justify-content: center;
}

/* A pricing table only reads as a table if the rows line up across the cards:
   name, then description, then price, then credits, then the button on a
   shared baseline whatever the description length. */
.ppl-plan-card { gap: 0; padding: 24px 22px; }
.ppl-plan-card__badge { margin-bottom: 10px; }
.ppl-plan-card__name { margin-bottom: 6px; }
.ppl-plan-card__desc { margin-bottom: 14px; }
.ppl-plan-card__price { border-top: 1px solid var(--ppl-client-line, rgba(255,255,255,.1)); margin-top: auto; padding-top: 16px; }
.ppl-plan-card__credits { margin-top: 8px; }
.ppl-plan-card__per { margin-top: 4px; }
.ppl-plan-card__cta { margin-top: 18px; padding-top: 0; }

/* The featured card lifts out of the row the way a highlighted column does. */
@media (min-width: 1081px) {
	.ppl-plan-card.is-featured { transform: translateY(-6px); }
	.ppl-plan-card.is-featured:hover { transform: translateY(-9px); }
}

/* Services and packs get more room too, now that the page is not capped. */
.ppl-buy-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ==================================================================== */
/* v1.19.1 — Plan card headings were being overridden by the site theme. */
/* `.ppl-plan-card__name` is a single class (0,1,0), which loses to a     */
/* theme rule like `.entry-content h3` or `#content h3`. The result was  */
/* a near-black heading on the dark card — invisible. These carry enough */
/* specificity to hold, without reaching for !important.                 */
/* ==================================================================== */
.ppl-client-dashboard .ppl-plan-card .ppl-plan-card__name,
.ppl-client-dashboard .ppl-billing-panel .ppl-plan-card__name { color: #fff; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plan-card .ppl-plan-card__name,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-billing-panel .ppl-plan-card__name { color: #12101f; }

/* The same exposure applies to every other heading the portal draws inside a
   card, so they are pinned the same way rather than waiting to break next. */
.ppl-client-dashboard .ppl-glass-card .ppl-plan-group__name,
.ppl-client-dashboard .ppl-glass-card .ppl-svc-card__name,
.ppl-client-dashboard .ppl-service-card .ppl-service-card__body h3,
.ppl-client-dashboard .ppl-modal__panel h3 { color: #fff; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-glass-card .ppl-plan-group__name,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-glass-card .ppl-svc-card__name,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-service-card .ppl-service-card__body h3,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-modal__panel h3 { color: #12101f; }

/* A plan card with no pricing table above it is the whole section now, so it
   should not carry the extra top gap the divider used to justify. */
.ppl-billing-panel > .ppl-buy-grid:first-child { margin-top: 0; }

/* ==================================================================== */
/* v1.20 — Service card legibility, button spacing, and a subtle shine.  */
/* ==================================================================== */

/* --- Service card text ------------------------------------------------ */
/* Same exposure as the plan headings: these are single classes, so a site
   theme's `p`, `li` or `strong` rules can take them over and drop the
   contrast. Pinned here, and lifted a little — the muted greys were on the
   low side of comfortable against the glass card even when they did win. */
.ppl-client-dashboard .ppl-svc-card .ppl-svc-card__desc,
.ppl-client-dashboard .ppl-order-card .ppl-order-card__desc { color: #c9c5d8; }
.ppl-client-dashboard .ppl-svc-card .ppl-svc-card__meta,
.ppl-client-dashboard .ppl-svc-card .ppl-svc-card__meta li { color: #ddd9e8; }
.ppl-client-dashboard .ppl-svc-card .ppl-svc-card__price strong { color: #fff; }
.ppl-client-dashboard .ppl-svc-card .ppl-svc-card__price span { color: #b0aac0; }
.ppl-client-dashboard .ppl-service-card .ppl-service-card__body p { color: #c9c5d8; }
.ppl-client-dashboard .ppl-service-card .ppl-service-card__body span { color: #ff9ad8; }

.ppl-client-dashboard[data-ppl-theme="light"] .ppl-svc-card .ppl-svc-card__desc,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-order-card .ppl-order-card__desc,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-service-card .ppl-service-card__body p { color: #4a4560; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-svc-card .ppl-svc-card__meta,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-svc-card .ppl-svc-card__meta li { color: #3d3856; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-svc-card .ppl-svc-card__price strong { color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-svc-card .ppl-svc-card__price span { color: #5a5570; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-service-card .ppl-service-card__body span { color: #b3187f; }

/* --- Button sizing ---------------------------------------------------- */
/* The base button carried `margin-left: auto` from its first home in a flex
   header, which pushed it off-centre anywhere else. Buttons now centre their
   own label, share a minimum height so a row of them lines up, and have room
   around the text rather than hugging it. */
.ppl-client-dashboard .ppl-client-button {
	align-items: center;
	display: inline-flex;
	gap: 8px;
	justify-content: center;
	line-height: 1.2;
	margin-left: 0;
	min-height: 40px;
	padding: 11px 18px;
}
.ppl-client-dashboard .ppl-client-welcome .ppl-client-button,
.ppl-client-dashboard .ppl-addon-note .ppl-client-button { margin-left: auto; }
.ppl-client-dashboard .ppl-client-button--sm { min-height: 34px; padding: 9px 14px; }
.ppl-svc-card__actions { gap: 10px; padding-top: 16px; }
.ppl-service-card__actions { gap: 10px; }

/* --- Subtle shine ----------------------------------------------------- */
/* A slow sheen crossing the fill, then a long pause — the same idea as the
   progress tracker's active stage, dialled well down so it reads as a
   material rather than an animation. Done with a background layer rather than
   a pseudo-element: an ::after would paint over the label, and pushing it
   behind with a negative z-index would hide it under the button's own fill.
   Only solid buttons get it — a ghost button has no fill for a sheen to
   travel across. */
.ppl-client-dashboard .ppl-client-button:not(.is-ghost):not(.is-done):not(.is-loading) {
	background-image:
		linear-gradient(100deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.20) 50%, rgba(255,255,255,0) 58%),
		linear-gradient(100deg, #f09, #8b5cf6);
	background-repeat: no-repeat;
	background-size: 260% 100%, 100% 100%;
	background-position: 170% 0, 0 0;
	animation: ppl-btn-shine 6s ease-in-out infinite;
}

/* Hovering brightens as before; the sweep keeps running underneath. */
.ppl-client-dashboard .ppl-client-button:not(.is-ghost):hover { filter: brightness(1.08); }

@keyframes ppl-btn-shine {
	0%        { background-position: 170% 0, 0 0; }
	38%, 100% { background-position: -70% 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
	.ppl-client-dashboard .ppl-client-button:not(.is-ghost):not(.is-done):not(.is-loading) {
		animation: none;
		background-image: linear-gradient(100deg, #f09, #8b5cf6);
	}
}

/* The comment form's submit is a deliberately small control inside a narrow
   column — keep it that size rather than letting the new button floor
   inflate it. */
.ppl-client-dashboard .ppl-deliverable-comments .ppl-client-button {
	font-size: .68rem;
	min-height: 30px;
	padding: 8px 12px;
}

/* ==================================================================== */
/* v1.21 — Badge alignment, yearly framing.                              */
/* ==================================================================== */

/* Every card carries a badge slot, filled or not. Without this the badge
   pushed the featured card's name, price and button down by its own height,
   so nothing lined up across the row — the one thing a pricing table has to
   get right. The empty slot holds the space and is hidden from screen
   readers, so a row reads as a row. */
.ppl-plan-card__badge {
	align-self: flex-start;
	line-height: 1.2;
	margin-bottom: 12px;
	min-height: 20px;
}
.ppl-plan-card__badge.is-empty {
	background: none;
	border-color: transparent;
	visibility: hidden;
}

/* The featured card's lift is what could push its badge into the card above;
   the row has margin to absorb it, and the lift is dropped once the cards
   stack, where "up" no longer means anything. */
.ppl-billing-panel > .ppl-buy-grid { padding-top: 8px; }

/* Yearly framing: what it comes to per month, and what that saves. Stated
   quietly under the price — the number that decides it is still the price. */
.ppl-plan-card__equiv { color: #b8b3c9; font-size: .74rem; margin: 6px 0 0; }
.ppl-plan-card__saving {
	align-self: flex-start;
	background: rgba(53,229,154,.14);
	border: 1px solid rgba(53,229,154,.32);
	border-radius: 999px;
	color: #6ff0bd;
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .04em;
	margin-top: 10px;
	padding: 4px 10px;
}
.ppl-billing-switch__save {
	background: rgba(255,255,255,.18);
	border-radius: 999px;
	font-size: .6rem;
	font-weight: 800;
	letter-spacing: .04em;
	margin-left: 7px;
	padding: 3px 7px;
	text-transform: uppercase;
	vertical-align: middle;
}
.ppl-billing-switch__btn:not(.is-active) .ppl-billing-switch__save {
	background: rgba(53,229,154,.16);
	color: #48c98d;
}

.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plan-card__equiv { color: #5a5570; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plan-card__saving {
	background: rgba(16,163,74,.10);
	border-color: rgba(16,163,74,.3);
	color: #12784f;
}

/* Request confirmed — the dedicated success page shown after a package
   request or a flat service redemption, before continuing to the
   dashboard. */
.ppl-request-confirmed { max-width: 640px; margin: 24px auto; padding: 32px; text-align: center; }
.ppl-request-confirmed__icon {
	align-items: center;
	background: linear-gradient(135deg, #f00099, #7c3aed);
	border-radius: 999px;
	color: #fff;
	display: flex;
	font-size: 1.6rem;
	font-weight: 800;
	height: 56px;
	justify-content: center;
	margin: 0 auto 14px;
	width: 56px;
}
.ppl-request-confirmed h1 { color: #fff; font-size: 1.5rem; margin: 4px 0 22px; }
.ppl-request-confirmed__block { margin: 0 0 18px; text-align: left; }
.ppl-request-confirmed__block h3 { color: #fff; font-size: .85rem; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .03em; }
.ppl-request-confirmed__credits {
	align-items: center;
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 12px;
	display: flex;
	gap: 14px;
	justify-content: center;
	margin: 18px 0;
	padding: 18px;
}
.ppl-request-confirmed__credits > div { text-align: center; }
.ppl-request-confirmed__credits strong { color: #fff; display: block; font-size: 1.3rem; }
.ppl-request-confirmed__credits-label { color: #b8b3c9; display: block; font-size: .72rem; margin-bottom: 2px; text-transform: uppercase; letter-spacing: .03em; }
.ppl-request-confirmed__credits-op { color: #b8b3c9; font-size: 1.1rem; font-weight: 700; }
.ppl-request-confirmed__note { color: #b8b3c9; font-size: .85rem; margin: 0 0 20px; }
.ppl-request-confirmed__zero {
	background: rgba(240,0,153,.08);
	border: 1px solid rgba(240,0,153,.3);
	border-radius: 12px;
	margin: 0 0 20px;
	padding: 16px;
	text-align: left;
}
.ppl-request-confirmed__zero strong { color: #fff; display: block; margin-bottom: 4px; }
.ppl-request-confirmed__zero p { color: #d8cfe6; font-size: .85rem; margin: 0 0 12px; }
.ppl-request-confirmed__continue { display: block; }

/* ==================================================================== */
/* v1.24 — Top-up credits: the prompt card and its dialog.               */
/* ==================================================================== */

.ppl-topup-card__body { align-items: center; display: flex; flex-wrap: wrap; gap: 18px; }
.ppl-topup-card__icon {
	align-items: center;
	background: linear-gradient(150deg, rgba(240,0,153,.2), rgba(139,92,246,.18));
	border: 1px solid rgba(240,0,153,.25);
	border-radius: 14px;
	color: #ff8ad0;
	display: flex;
	flex: 0 0 auto;
	height: 52px;
	justify-content: center;
	width: 52px;
}
.ppl-topup-card__icon .ppl-icon { height: 24px; width: 24px; }
.ppl-topup-card__text { flex: 1 1 300px; min-width: 0; }
.ppl-topup-card__text h2 { color: #fff; font-size: 1.2rem; margin: 2px 0 0; }
.ppl-topup-card__text > p { color: #b6b1c6; font-size: .82rem; line-height: 1.55; margin: 6px 0 0; max-width: 70ch; }
.ppl-topup-card__cta { flex: 0 0 auto; margin-left: auto; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-topup-card__text h2 { color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-topup-card__text > p { color: #4a4560; }

@media (max-width: 720px) { .ppl-topup-card__cta { margin-left: 0; width: 100%; } }

/* --- The dialog ------------------------------------------------------- */
.ppl-topup-modal__panel { max-width: 880px; padding: 28px; }
.ppl-topup-modal__head { align-items: flex-start; display: flex; gap: 16px; margin: 0 40px 22px 0; }
.ppl-topup-modal__icon {
	align-items: center;
	background: linear-gradient(150deg, rgba(240,0,153,.22), rgba(139,92,246,.2));
	border: 1px solid rgba(240,0,153,.28);
	border-radius: 14px;
	color: #ff8ad0;
	display: flex;
	flex: 0 0 auto;
	height: 52px;
	justify-content: center;
	width: 52px;
}
.ppl-topup-modal__icon .ppl-icon { height: 24px; width: 24px; }
.ppl-topup-modal__head h3 { color: #fff; font-size: 1.3rem; margin: 2px 0 0; }
.ppl-topup-modal__head p { color: #b6b1c6; font-size: .82rem; line-height: 1.55; margin: 6px 0 0; }

.ppl-topup-modal__body {
	align-items: start;
	display: grid;
	gap: 22px;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}
@media (max-width: 760px) { .ppl-topup-modal__body { grid-template-columns: minmax(0, 1fr); } }

.ppl-topup-modal__choices { display: grid; gap: 10px; min-width: 0; }
.ppl-topup-modal__choices .ppl-section-eyebrow { margin: 0 0 2px; }

/* One package. The whole row is the control, so the click target is the row
   rather than a 16px circle. */
.ppl-topup-option {
	align-items: center;
	background: rgba(255,255,255,.035);
	border: 1px solid var(--ppl-client-line, rgba(255,255,255,.1));
	border-radius: 14px;
	cursor: pointer;
	display: flex;
	gap: 12px;
	padding: 13px 15px;
	transition: border-color .16s ease, background .16s ease;
}
.ppl-topup-option:hover { background: rgba(255,255,255,.06); border-color: rgba(240,0,153,.35); }
.ppl-topup-option.is-selected {
	background: linear-gradient(120deg, rgba(240,0,153,.14), rgba(139,92,246,.1));
	border-color: rgba(240,0,153,.55);
}
.ppl-topup-option input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.ppl-topup-option__mark {
	border: 2px solid rgba(255,255,255,.28);
	border-radius: 50%;
	flex: 0 0 auto;
	height: 18px;
	position: relative;
	width: 18px;
}
.ppl-topup-option.is-selected .ppl-topup-option__mark { border-color: #ff5bc0; }
.ppl-topup-option.is-selected .ppl-topup-option__mark::after {
	background: #ff5bc0;
	border-radius: 50%;
	content: "";
	inset: 3px;
	position: absolute;
}
.ppl-topup-option input:focus-visible + .ppl-topup-option__mark { outline: 2px solid #ff8ad0; outline-offset: 3px; }
.ppl-topup-option__icon {
	align-items: center;
	background: rgba(240,0,153,.14);
	border-radius: 10px;
	color: #ff8ad0;
	display: flex;
	flex: 0 0 auto;
	height: 36px;
	justify-content: center;
	width: 36px;
}
.ppl-topup-option__text { display: grid; min-width: 0; }
.ppl-topup-option__text strong { color: #fff; font-size: .92rem; }
.ppl-topup-option__text span { color: #b8b3c9; font-size: .8rem; }
.ppl-topup-option__tag {
	background: rgba(240,0,153,.16);
	border: 1px solid rgba(240,0,153,.3);
	border-radius: 999px;
	color: #ff8ad0;
	flex: 0 0 auto;
	font-size: .63rem;
	font-weight: 800;
	letter-spacing: .03em;
	margin-left: auto;
	padding: 4px 9px;
	white-space: nowrap;
}
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-topup-option { background: #fff; border-color: rgba(17,24,39,.1); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-topup-option__text strong { color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-topup-option__text span { color: #4a4560; }

.ppl-topup-modal__note {
	align-items: flex-start;
	background: rgba(93,132,255,.1);
	border: 1px solid rgba(93,132,255,.25);
	border-radius: 12px;
	color: #b9c6ff;
	display: flex;
	font-size: .76rem;
	gap: 9px;
	line-height: 1.5;
	margin: 4px 0 0;
	padding: 11px 13px;
}

/* --- Order summary ---------------------------------------------------- */
.ppl-topup-summary {
	background: rgba(255,255,255,.04);
	border: 1px solid var(--ppl-client-line, rgba(255,255,255,.1));
	border-radius: 16px;
	padding: 20px;
	position: sticky;
	top: 0;
}
.ppl-topup-summary h4 { color: #fff; font-size: 1rem; margin: 0 0 14px; }
.ppl-topup-summary__line {
	align-items: center;
	background: rgba(255,255,255,.04);
	border: 1px solid var(--ppl-client-line, rgba(255,255,255,.1));
	border-radius: 12px;
	display: flex;
	gap: 11px;
	padding: 11px 13px;
}
.ppl-topup-summary__icon {
	align-items: center;
	background: rgba(240,0,153,.14);
	border-radius: 9px;
	color: #ff8ad0;
	display: flex;
	flex: 0 0 auto;
	height: 32px;
	justify-content: center;
	width: 32px;
}
.ppl-topup-summary__line strong { color: #fff; font-size: .86rem; min-width: 0; }
.ppl-topup-summary__line > span:last-child { color: #ddd9e8; font-size: .86rem; margin-left: auto; white-space: nowrap; }
.ppl-topup-summary__row {
	border-top: 1px solid var(--ppl-client-line, rgba(255,255,255,.1));
	color: #b8b3c9;
	display: flex;
	font-size: .82rem;
	justify-content: space-between;
	margin-top: 12px;
	padding-top: 12px;
}
.ppl-topup-summary__row--total { color: #fff; font-size: .92rem; }
.ppl-topup-summary__row--total strong { font-size: 1.35rem; letter-spacing: -.02em; }
.ppl-topup-summary__cta { margin-top: 16px; width: 100%; }
.ppl-topup-summary__secure { align-items: center; color: #9c96ad; display: flex; font-size: .72rem; gap: 6px; justify-content: center; margin: 10px 0 0; }
.ppl-topup-summary__tax { color: #8f899f; font-size: .68rem; line-height: 1.5; margin: 8px 0 0; text-align: center; }

.ppl-client-dashboard[data-ppl-theme="light"] .ppl-topup-summary { background: rgba(17,24,39,.03); border-color: rgba(17,24,39,.1); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-topup-summary h4,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-topup-summary__line strong,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-topup-summary__row--total { color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-topup-modal__head h3 { color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-topup-modal__head p { color: #4a4560; }

/* ==================================================================== */
/* v1.22 — One card component shared by Buy credits and Order a service. */
/* Restored: an earlier edit was appended to a stale copy of this file   */
/* and overwrote this block along with v1.23.                            */
/* ==================================================================== */

.ppl-client-dashboard .ppl-svc-card,
.ppl-client-dashboard .ppl-order-card,
.ppl-client-dashboard .ppl-plan-card {
	background: rgba(255,255,255,.04);
	border: 1px solid var(--ppl-client-line, rgba(255,255,255,.1));
	border-radius: 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	min-width: 0;
	padding: 22px 20px;
	transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.ppl-client-dashboard .ppl-svc-card:hover,
.ppl-client-dashboard .ppl-order-card:hover,
.ppl-client-dashboard .ppl-plan-card:hover {
	border-color: rgba(240,0,153,.4);
	box-shadow: 0 18px 44px rgba(0,0,0,.28);
	transform: translateY(-2px);
}
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-svc-card,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-order-card,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plan-card {
	background: #fff;
	border-color: rgba(17,24,39,.1);
	box-shadow: 0 8px 22px rgba(17,24,39,.05);
}

.ppl-client-dashboard .ppl-svc-card__icon,
.ppl-client-dashboard .ppl-order-card__icon {
	align-items: center;
	background: rgba(240,0,153,.13);
	border: 1px solid rgba(240,0,153,.27);
	border-radius: 12px;
	color: #ff62c3;
	display: flex;
	flex: 0 0 auto;
	font-size: 1.15rem;
	height: 44px;
	justify-content: center;
	margin-bottom: 2px;
	width: 44px;
}

.ppl-client-dashboard .ppl-svc-card .ppl-svc-card__name,
.ppl-client-dashboard .ppl-order-card h3,
.ppl-client-dashboard .ppl-plan-card .ppl-plan-card__name {
	color: #fff;
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: -.01em;
	margin: 2px 0 0;
	overflow-wrap: anywhere;
}
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-svc-card .ppl-svc-card__name,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-order-card h3,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plan-card .ppl-plan-card__name { color: #12101f; }

.ppl-client-dashboard .ppl-svc-card .ppl-svc-card__desc,
.ppl-client-dashboard .ppl-order-card .ppl-order-card__desc,
.ppl-client-dashboard .ppl-plan-card .ppl-plan-card__desc {
	color: #c9c5d8;
	font-size: .8rem;
	line-height: 1.5;
	margin: 0;
	overflow-wrap: anywhere;
}
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-svc-card .ppl-svc-card__desc,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-order-card .ppl-order-card__desc,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plan-card .ppl-plan-card__desc { color: #4a4560; }

.ppl-client-dashboard .ppl-order-card .ppl-order-card__price {
	color: #fff;
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -.02em;
	margin-top: auto;
	padding-top: 8px;
}
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-order-card .ppl-order-card__price { color: #12101f; }

.ppl-client-dashboard .ppl-order-card__includes {
	color: #ddd9e8;
	display: grid;
	font-size: .76rem;
	gap: 3px;
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
}
.ppl-client-dashboard .ppl-order-card__includes li { align-items: center; display: flex; gap: 7px; }
.ppl-client-dashboard .ppl-order-card__includes li::before {
	background: #ff5bc0;
	border-radius: 50%;
	content: "";
	flex: 0 0 5px;
	height: 5px;
	width: 5px;
}
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-order-card__includes { color: #3d3856; }

.ppl-client-dashboard .ppl-svc-card__actions,
.ppl-client-dashboard .ppl-order-card__actions {
	display: grid;
	gap: 10px;
	grid-template-columns: minmax(0, 1fr) auto;
	margin-top: auto;
	padding-top: 14px;
}
.ppl-client-dashboard .ppl-order-card__actions .ppl-order-card__cta,
.ppl-client-dashboard .ppl-svc-card__actions .ppl-client-button { width: 100%; }
.ppl-client-dashboard .ppl-order-card__details-btn { white-space: nowrap; width: auto !important; }

@media (max-width: 480px) {
	.ppl-client-dashboard .ppl-svc-card__actions,
	.ppl-client-dashboard .ppl-order-card__actions { grid-template-columns: minmax(0, 1fr); }
	.ppl-client-dashboard .ppl-order-card__details-btn { width: 100% !important; }
}

.ppl-client-dashboard .ppl-client-button:disabled,
.ppl-client-dashboard .ppl-client-button[disabled] {
	animation: none;
	background-image: linear-gradient(100deg, #f09, #8b5cf6);
	box-shadow: none;
	cursor: default;
	filter: grayscale(.35);
	opacity: .45;
}

.ppl-client-dashboard .ppl-order-card__credits-note {
	color: #ff8ad0;
	display: block;
	font-size: .7rem;
	font-weight: 700;
	margin-top: 8px;
}
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-order-card__credits-note { color: #b3187f; }

.ppl-client-dashboard .ppl-order-card__credits-btn {
	background: linear-gradient(100deg, #f09, #8b5cf6);
	border: 0;
	border-radius: 9px;
	color: #fff;
	font-weight: 800;
}

.ppl-client-dashboard .ppl-buy-grid {
	align-items: stretch;
	gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ==================================================================== */
/* v1.23 — Buy credits: hero balance, billing bar, richer plan cards.    */
/* Restored alongside v1.22.                                             */
/* ==================================================================== */

/* An inline SVG with no intrinsic size fills whatever box it is given, so
   the icon is pinned here and capped — a missing rule further down should
   never be able to inflate it to the width of its column again. */
.ppl-icon {
	display: block;
	flex: 0 0 auto;
	height: 20px;
	max-height: 100%;
	max-width: 100%;
	width: 20px;
}

/* --- Hero ------------------------------------------------------------- */
.ppl-buy-hero {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: space-between;
}
.ppl-buy-hero > div { min-width: 0; }

.ppl-balance-card {
	align-items: center;
	background: linear-gradient(150deg, rgba(240,0,153,.16), rgba(139,92,246,.12));
	border: 1px solid rgba(240,0,153,.28);
	border-radius: 16px;
	display: flex;
	flex: 0 0 auto;
	gap: 14px;
	padding: 16px 22px;
}
.ppl-balance-card__icon {
	align-items: center;
	background: rgba(240,0,153,.2);
	border-radius: 12px;
	color: #ff8ad0;
	display: flex;
	flex: 0 0 auto;
	height: 42px;
	justify-content: center;
	width: 42px;
}
.ppl-balance-card__icon .ppl-icon { height: 22px; width: 22px; }
.ppl-balance-card__label { color: #cfc9de; display: block; font-size: .72rem; letter-spacing: .04em; }
.ppl-balance-card__value { color: #fff; display: block; font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-balance-card { background: linear-gradient(150deg, rgba(240,0,153,.08), rgba(139,92,246,.06)); border-color: rgba(240,0,153,.22); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-balance-card__label { color: #5a5570; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-balance-card__value { color: #12101f; }

/* --- Billing bar ------------------------------------------------------ */
.ppl-billing-bar {
	align-items: center;
	border-bottom: 1px solid var(--ppl-client-line, rgba(255,255,255,.1));
	column-gap: 24px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 20px;
	padding-bottom: 18px;
	row-gap: 14px;
}
.ppl-billing-bar__group { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; min-width: 0; }
.ppl-billing-bar__icon {
	align-items: center;
	background: rgba(255,255,255,.06);
	border-radius: 10px;
	color: #ff8ad0;
	display: flex;
	flex: 0 0 auto;
	height: 34px;
	justify-content: center;
	width: 34px;
}
.ppl-billing-bar__label { color: #cfc9de; font-size: .82rem; font-weight: 700; }
.ppl-billing-bar__title { color: #fff; font-size: 1.15rem; margin: 0; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-billing-bar__label { color: #4a4560; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-billing-bar__icon { background: rgba(17,24,39,.05); }

.ppl-billing-switch__save {
	background: rgba(53,229,154,.18);
	border-radius: 999px;
	color: #6ff0bd;
	font-size: .6rem;
	font-weight: 800;
	letter-spacing: .04em;
	margin-left: 7px;
	padding: 3px 7px;
	vertical-align: middle;
}
.ppl-billing-switch__btn.is-active .ppl-billing-switch__save { background: rgba(255,255,255,.22); color: #fff; }

.ppl-assurances { display: flex; flex-wrap: wrap; gap: 22px; list-style: none; margin: 0; padding: 0; }
.ppl-assurances li { align-items: center; display: flex; gap: 10px; margin: 0; }
.ppl-assurances span {
	align-items: center;
	background: rgba(255,255,255,.06);
	border-radius: 10px;
	color: #b9a7ff;
	display: flex;
	flex: 0 0 auto;
	height: 32px;
	justify-content: center;
	width: 32px;
}
.ppl-assurances strong { color: #ece9f5; display: block; font-size: .76rem; font-weight: 700; }
.ppl-assurances small { color: #918ba4; display: block; font-size: .68rem; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-assurances span { background: rgba(17,24,39,.05); color: #6d4df0; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-assurances strong { color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-assurances small { color: #5a5570; }

@media (max-width: 1100px) { .ppl-assurances { gap: 16px; } .ppl-assurances small { display: none; } }
@media (max-width: 680px)  { .ppl-assurances { display: none; } }

/* --- Plan card -------------------------------------------------------- */
.ppl-plan-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1400px) { .ppl-plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1080px) { .ppl-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .ppl-plan-grid { grid-template-columns: minmax(0, 1fr); } }

.ppl-plan-card__top { align-items: flex-start; display: flex; gap: 10px; justify-content: space-between; min-height: 46px; }
.ppl-plan-card__icon {
	align-items: center;
	background: linear-gradient(150deg, rgba(240,0,153,.2), rgba(139,92,246,.18));
	border: 1px solid rgba(240,0,153,.25);
	border-radius: 13px;
	color: #ff8ad0;
	display: flex;
	flex: 0 0 auto;
	height: 46px;
	justify-content: center;
	width: 46px;
}
.ppl-plan-card__icon .ppl-icon { height: 22px; width: 22px; }
.ppl-plan-card__badge { align-self: flex-start; margin: 4px 0 0; }

.ppl-plan-card__figures {
	border-top: 1px solid var(--ppl-client-line, rgba(255,255,255,.1));
	margin-top: 14px;
	padding-top: 14px;
}
.ppl-plan-card__credits { align-items: baseline; display: flex; flex-wrap: wrap; gap: 7px; }
.ppl-plan-card__credits strong { color: #fff; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.ppl-plan-card__credits span { color: #b8b3c9; font-size: .76rem; }
.ppl-plan-card__price { align-items: baseline; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ppl-plan-card__price strong { color: #fff; font-size: 1.75rem; letter-spacing: -.03em; line-height: 1.1; }
.ppl-plan-card__price span { color: #9690a5; font-size: .78rem; font-weight: 700; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plan-card__credits strong,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plan-card__price strong { color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plan-card__credits span { color: #4a4560; }

.ppl-plan-card__features { display: grid; gap: 7px; list-style: none; margin: 14px 0 0; padding: 0; }
.ppl-plan-card__features li {
	align-items: flex-start;
	color: #ddd9e8;
	display: grid;
	font-size: .76rem;
	gap: 8px;
	grid-template-columns: 16px minmax(0, 1fr);
	line-height: 1.45;
	margin: 0;
}
.ppl-plan-card__features li::before {
	color: #ff5bc0;
	content: "✓";
	font-size: .8rem;
	font-weight: 800;
	line-height: 1.35;
}
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plan-card__features li { color: #3d3856; }

.ppl-plan-card__cta { margin-top: 16px; }

/* --- "Need higher volume?" disclosure --------------------------------- */
.ppl-plan-more { margin-top: 18px; }
.ppl-plan-more > summary {
	align-items: center;
	background: rgba(255,255,255,.035);
	border: 1px solid var(--ppl-client-line, rgba(255,255,255,.1));
	border-radius: 16px;
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	list-style: none;
	padding: 16px 20px;
	transition: border-color .16s ease, background .16s ease;
}
.ppl-plan-more > summary::-webkit-details-marker { display: none; }
.ppl-plan-more > summary:hover { background: rgba(255,255,255,.06); border-color: rgba(240,0,153,.35); }
.ppl-plan-more__icon {
	align-items: center;
	background: rgba(240,0,153,.14);
	border-radius: 11px;
	color: #ff8ad0;
	display: flex;
	flex: 0 0 auto;
	height: 38px;
	justify-content: center;
	width: 38px;
}
.ppl-plan-more__text { flex: 1 1 220px; min-width: 0; }
.ppl-plan-more__text strong { color: #fff; display: block; font-size: .88rem; }
.ppl-plan-more__text small { color: #b6b1c6; display: block; font-size: .76rem; margin-top: 2px; }
.ppl-plan-more__cta { color: #ff8ad0; flex: 0 0 auto; font-size: .78rem; font-weight: 800; margin-left: auto; text-align: right; }
.ppl-plan-more__cta em { color: #8f899f; display: block; font-size: .7rem; font-style: normal; font-weight: 600; margin-top: 2px; }
.ppl-plan-more__cta::after { content: " →"; }
.ppl-plan-more[open] .ppl-plan-more__cta::after { content: " ↑"; }
.ppl-plan-more[open] > summary { border-radius: 16px 16px 0 0; }
.ppl-plan-more > .ppl-buy-grid { padding: 18px 0 4px; }

.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plan-more > summary { background: #fff; border-color: rgba(17,24,39,.1); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plan-more__text strong { color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plan-more__text small { color: #5a5570; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plan-more__cta { color: #b3187f; }

@media (max-width: 640px) { .ppl-plan-more__cta { margin-left: 0; text-align: left; } }

.ppl-client-dashboard .ppl-svc-card__icon .ppl-icon,
.ppl-client-dashboard .ppl-order-card__icon .ppl-icon { height: 21px; width: 21px; }

/* ==================================================================== */
/* v1.25 — Plan card alignment, and the "View all plans" panel.          */
/* ==================================================================== */

/* Descriptions differ in length — Legend runs to three lines where the others
   run to two — which pushed its credits, price, features and button a line
   lower than its neighbours. The description now absorbs the slack, so every
   row below it lines up across the grid and the cards can be read across
   rather than one at a time. */
.ppl-client-dashboard .ppl-plan-card .ppl-plan-card__desc {
	flex: 1 1 auto;
	margin-bottom: 2px;
}

/* A card with no description at all still needs the same slack, or it would
   be the one card out of line. */
.ppl-client-dashboard .ppl-plan-card .ppl-plan-card__figures { margin-top: auto; }

/* The expanded panel was floating free of the bar that opens it. Open, the
   two now read as one object: the summary keeps its top corners, loses its
   bottom ones, and the cards sit inside a container that continues the same
   border down and around them. */
.ppl-plan-more[open] {
	background: rgba(255,255,255,.02);
	border: 1px solid var(--ppl-client-line, rgba(255,255,255,.1));
	border-radius: 16px;
}
.ppl-plan-more[open] > summary {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ppl-client-line, rgba(255,255,255,.1));
	border-radius: 0;
}
.ppl-plan-more[open] > summary:hover { background: rgba(255,255,255,.03); }
.ppl-plan-more > .ppl-buy-grid { padding: 18px; }

.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plan-more[open] {
	background: rgba(17,24,39,.02);
	border-color: rgba(17,24,39,.1);
}

/* Inside the panel the cards sit on the panel's own tint, so they need a
   touch more separation from it than they do against the page. */
.ppl-client-dashboard .ppl-plan-more .ppl-plan-card { background: rgba(255,255,255,.05); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plan-more .ppl-plan-card { background: #fff; }

/* The feature list is the last flexible thing before the button; pin the
   button to the card's floor so a plan with one fewer feature does not sit
   its CTA higher than the rest of the row. */
.ppl-client-dashboard .ppl-plan-card .ppl-plan-card__features { margin-bottom: 4px; }
.ppl-client-dashboard .ppl-plan-card .ppl-plan-card__cta { margin-top: 16px; }

/* ==================================================================== */
/* v1.26 — Checkout in a panel, and a close button that sits straight.   */
/* ==================================================================== */

/* The close button was an absolutely-positioned box with a text glyph and no
   centring, so the × sat low and left of centre and the whole control looked
   pasted onto the corner. Centre it properly, round it, and give it enough
   inset to sit inside the panel rather than on its edge. */
.ppl-modal__close {
	align-items: center;
	background: rgba(255,255,255,.07);
	border: 1px solid var(--ppl-client-line, rgba(255,255,255,.1));
	border-radius: 50%;
	color: #cfc9de;
	cursor: pointer;
	display: flex;
	font-size: 1.05rem;
	height: 32px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	position: absolute;
	right: 18px;
	top: 18px;
	transition: background .16s ease, color .16s ease, border-color .16s ease;
	width: 32px;
	z-index: 2;
}
.ppl-modal__close:hover {
	background: rgba(240,0,153,.18);
	border-color: rgba(240,0,153,.4);
	color: #fff;
}
.ppl-modal__close:focus-visible { outline: 2px solid #ff8ad0; outline-offset: 2px; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-modal__close {
	background: rgba(17,24,39,.06);
	border-color: rgba(17,24,39,.12);
	color: #3d3856;
}

/* Keep the heading clear of it whatever the panel. */
.ppl-topup-modal__head { padding-right: 44px; }
.ppl-topup-modal__head { margin-right: 0; }

/* --- Checkout panel --------------------------------------------------- */
/* Stripe renders its own form in here, on its own domain, in an iframe it
   controls — so this styles the frame around it and nothing inside. */
.ppl-checkout-modal__panel {
	background: #17142a;
	/* Wide enough for Stripe's two-column embedded layout (summary left, payment
	   right), which it shows once its container is roughly 820px+. Falls back to
	   the viewport width on smaller screens. */
	max-width: 1000px;
	width: min(1000px, calc(100vw - 48px));
	padding: 52px 24px 24px;
}
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-checkout-modal__panel { background: #fff; }
.ppl-checkout-modal__mount { min-height: 460px; }
.ppl-checkout-modal__error {
	background: rgba(214,54,56,.12);
	border: 1px solid rgba(214,54,56,.35);
	border-radius: 10px;
	color: #ff9ea0;
	font-size: .82rem;
	line-height: 1.5;
	margin: 12px 0 0;
	padding: 11px 13px;
}
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-checkout-modal__error { color: #a02224; }

@media (max-width: 600px) {
	.ppl-checkout-modal__panel { padding: 48px 12px 12px; width: calc(100vw - 20px); }
}

/* ==================================================================== */
/* v1.27 — Account tier switcher (Personal / Enterprise) on Buy credits  */
/* ==================================================================== */
.ppl-plans-card--tiered { padding: 22px; }

/* Primary control — larger and heavier than the billing switch so it reads
   as the top of the hierarchy. One tier of plans is visible at a time. */
.ppl-account-switch {
	background: rgba(255,255,255,.045);
	border: 1px solid var(--ppl-client-line, rgba(255,255,255,.1));
	border-radius: 12px;
	display: inline-flex;
	gap: 4px;
	margin: 0 0 16px;
	max-width: 100%;
	padding: 4px;
}
.ppl-account-switch__btn {
	align-items: center;
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 9px;
	color: #b8b3c9;
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	font: inherit;
	font-size: .82rem;
	font-weight: 800;
	gap: 8px;
	justify-content: center;
	line-height: 1;
	padding: 10px 20px;
	transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.ppl-account-switch__btn:hover { color: #fff; }
.ppl-account-switch__btn.is-active {
	background: linear-gradient(100deg, #f09, #8b5cf6);
	box-shadow: 0 10px 26px rgba(240,0,153,.26);
	color: #fff;
}
.ppl-account-switch__btn:focus-visible { outline: 2px solid #ff8ad0; outline-offset: 2px; }
.ppl-account-switch__icon { display: inline-flex; }
.ppl-account-switch__icon svg { height: 16px; width: 16px; }

.ppl-account-panel[hidden] { display: none !important; }

.ppl-billing-bar--tiered { margin-bottom: 18px; }

/* Per-tier heading above its plan grid. */
.ppl-plans-tier__head { margin: 4px 0 14px; }
.ppl-plans-tier__title { color: #fff; font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.ppl-plans-tier__lede { color: #b6b1c6; font-size: .84rem; margin: 4px 0 0; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plans-tier__title { color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plans-tier__lede { color: #5a5570; }

.ppl-billing-empty { color: #9690a5; font-size: .85rem; padding: 22px 4px; text-align: center; }

/* "Need higher volume?" cross-sell banner under a tier's plans. */
.ppl-higher-volume {
	align-items: center;
	background: rgba(139,92,246,.08);
	border: 1px solid rgba(139,92,246,.22);
	border-radius: 14px;
	display: flex;
	gap: 16px;
	margin-top: 16px;
	padding: 16px 18px;
}
.ppl-higher-volume__text { min-width: 0; }
.ppl-higher-volume__text strong { color: #fff; display: block; font-size: .9rem; }
.ppl-higher-volume__text p { color: #b6b1c6; font-size: .8rem; line-height: 1.5; margin: 3px 0 0; }
.ppl-higher-volume .ppl-client-button { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-higher-volume__text strong { color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-higher-volume__text p { color: #5a5570; }
@media (max-width: 640px) {
	.ppl-account-switch { display: flex; width: 100%; }
	.ppl-account-switch__btn { flex: 1 1 0; }
	.ppl-higher-volume { flex-wrap: wrap; }
	.ppl-higher-volume .ppl-client-button { margin-left: 0; width: 100%; }
}

/* ==================================================================== */
/* v1.28 — Plan card subscription state (current / upgrade / downgrade)  */
/* ==================================================================== */
/* The card is a div; the CTA lives in a form (checkout) or the portal form,
   pinned to the bottom so a row of cards still lines up. */
.ppl-plan-card__buy,
.ppl-plan-card__switch { margin-top: auto; }
.ppl-plan-card__buy .ppl-plan-card__cta,
.ppl-plan-card__switch .ppl-plan-card__cta { width: 100%; }

.ppl-plan-card.is-current-plan {
	border-color: rgba(53,229,154,.5);
	box-shadow: 0 0 0 1px rgba(53,229,154,.22) inset, 0 18px 44px rgba(0,0,0,.28);
}
.ppl-plan-card__badge--current {
	background: rgba(53,229,154,.14);
	border: 1px solid rgba(53,229,154,.4);
	color: #35e59a;
}

.ppl-plan-card__active {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: auto;
	padding-top: 16px;
	text-align: center;
}
.ppl-plan-card__active-label {
	align-items: center;
	color: #35e59a;
	display: inline-flex;
	font-size: .9rem;
	font-weight: 800;
	gap: 8px;
}
.ppl-plan-card__active-label svg { height: 16px; width: 16px; }
.ppl-plan-card__manage {
	appearance: none;
	background: transparent;
	border: 0;
	color: #b8b3c9;
	cursor: pointer;
	font: inherit;
	font-size: .76rem;
	font-weight: 700;
	padding: 0;
	text-decoration: underline;
}
.ppl-plan-card__manage:hover { color: #fff; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plan-card__manage { color: #5a5570; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plan-card__manage:hover { color: #12101f; }

/* ==================================================================== */
/* v1.28.1 — Plan-change confirm popup                                    */
/* ==================================================================== */
.ppl-planchange-modal__panel { max-width: 440px; padding: 40px 24px 24px; text-align: left; }
.ppl-planchange-modal__panel h3 { color: #fff; font-size: 1.15rem; margin: 4px 0 10px; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-planchange-modal__panel h3 { color: #12101f; }
.ppl-planchange-modal__body { color: #d7d3e4; font-size: .9rem; line-height: 1.5; margin: 0 0 10px; }
.ppl-planchange-modal__note { color: #9690a5; font-size: .78rem; line-height: 1.5; margin: 0 0 14px; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-planchange-modal__body { color: #2a2640; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-planchange-modal__note { color: #6a6580; }
.ppl-planchange-modal__error {
	background: rgba(214,54,56,.12);
	border: 1px solid rgba(214,54,56,.35);
	border-radius: 10px;
	color: #ff9ea0;
	font-size: .82rem;
	line-height: 1.5;
	margin: 0 0 12px;
	padding: 10px 12px;
}
.ppl-planchange-modal__actions { display: flex; gap: 10px; justify-content: flex-end; }

/* Current-plan tag in the profile summary. */
.ppl-plan-tag {
	background: linear-gradient(100deg, rgba(240,0,153,.16), rgba(139,92,246,.16));
	border: 1px solid rgba(240,0,153,.32);
	border-radius: 999px;
	color: #ff8ad0;
	display: inline-block;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .01em;
	padding: 3px 9px;
}
.ppl-plan-tag--none {
	background: rgba(255,255,255,.06);
	border-color: rgba(255,255,255,.14);
	color: #9690a5;
}
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plan-tag--none { background: rgba(17,24,39,.05); border-color: rgba(17,24,39,.12); color: #6a6580; }

/* Paused subscription tag in the profile summary. */
.ppl-plan-tag--paused {
	background: rgba(245,158,11,.16);
	border-color: rgba(245,158,11,.42);
	color: #fbbf24;
}
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plan-tag--paused { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.4); color: #b45309; }

/* Adobe-style "save with yearly billing" promo banner above the billing tabs. */
.ppl-year-promo {
	align-items: center;
	background: linear-gradient(100deg, rgba(240,0,153,.14), rgba(139,92,246,.14));
	border: 1px solid rgba(240,0,153,.30);
	border-radius: 12px;
	color: #ffd7ef;
	display: flex;
	gap: 9px;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .01em;
	margin: 0 0 16px;
	padding: 10px 14px;
}
.ppl-year-promo__icon {
	color: #ff4fb8;
	font-size: .95rem;
	line-height: 1;
}
.ppl-year-promo__text { line-height: 1.3; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-year-promo {
	background: linear-gradient(100deg, rgba(240,0,153,.08), rgba(139,92,246,.08));
	border-color: rgba(240,0,153,.24);
	color: #8a2b66;
}
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-year-promo__icon { color: #d6008a; }

/* The tier heading ("Personal Plans" / "Enterprise Plans") is a single class,
   so a site theme's own h3 colour can out-specify it and render it dark on the
   dark card. Raise specificity so it stays white in dark and dark in light. */
.ppl-client-dashboard .ppl-plans-tier__head .ppl-plans-tier__title { color: #fff; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-plans-tier__head .ppl-plans-tier__title { color: #12101f; }

/* Billing page: balance + current-plan summary row. */
.ppl-billing-summary { display: flex; flex-wrap: wrap; gap: 14px; }
.ppl-billing-summary__item {
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.10);
	border-radius: 14px;
	flex: 1 1 200px;
	padding: 16px 18px;
}
.ppl-billing-summary__label { color: #9690a5; display: block; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ppl-billing-summary__value { align-items: center; color: #fff; display: flex; flex-wrap: wrap; font-size: 1.5rem; font-weight: 800; gap: 8px; margin-top: 6px; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-billing-summary__item { background: rgba(17,24,39,.03); border-color: rgba(17,24,39,.10); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-billing-summary__value { color: #12101f; }

/* Billing page: Invoices / Credit transactions tabs. */
.ppl-billrec-tabs {
	border-bottom: 1px solid rgba(255,255,255,.10);
	display: flex;
	gap: 4px;
	margin-bottom: 18px;
}
.ppl-billrec-tab {
	align-items: center;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	color: #9690a5;
	cursor: pointer;
	display: inline-flex;
	font-size: .9rem;
	font-weight: 700;
	gap: 8px;
	margin-bottom: -1px;
	padding: 10px 14px;
}
.ppl-billrec-tab:hover { color: #d8d3e6; }
.ppl-billrec-tab.is-active { border-bottom-color: #f00099; color: #fff; }
.ppl-billrec-tab__count {
	background: rgba(255,255,255,.08);
	border-radius: 999px;
	color: inherit;
	font-size: .72rem;
	font-weight: 800;
	min-width: 20px;
	padding: 2px 7px;
	text-align: center;
}
.ppl-billrec-tab.is-active .ppl-billrec-tab__count { background: rgba(240,0,153,.22); color: #ff8ad0; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-billrec-tabs { border-bottom-color: rgba(17,24,39,.10); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-billrec-tab { color: #6a6580; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-billrec-tab.is-active { color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-billrec-tab__count { background: rgba(17,24,39,.06); }

/* "Your episode, step by step" — the large task-status tracker on the
   Dashboard's "My Workspace" card, showing one Task/Parent's own stage
   at a time (never a Subtask's). Deliberately a distinct, larger visual
   treatment from the compact .ppl-tracker__* system used per-deliverable
   elsewhere, matching the requested mockup: rounded pill ends, angled
   chevron connectors between steps, and a circular icon badge per step
   rather than a small tick-in-chevron. */
.ppl-big-tracker { margin: 0 22px 22px; text-align: center; }
.ppl-big-tracker__title { color: #fff; font-size: 1.6rem; font-weight: 800; margin: 0 0 4px; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-big-tracker__title { color: #12101f; }
.ppl-big-tracker__kicker { color: #b8b3c9; font-size: .72rem; font-weight: 700; letter-spacing: .12em; margin: 0 0 20px; text-transform: uppercase; }
.ppl-big-tracker__task-name { color: #fff; font-size: 1rem; font-weight: 700; margin: -12px 0 20px; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-big-tracker__task-name { color: #12101f; }
.ppl-big-tracker__steps {
	display: flex;
	list-style: none;
	margin: 0 0 18px;
	overflow-x: auto;
	padding: 0;
}
.ppl-big-tracker__step {
	align-items: center;
	background: rgba(255,255,255,.05);
	border-right: 1px solid rgba(0,0,0,.25);
	color: #9690a5;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 8px;
	min-width: 108px;
	padding: 18px 10px;
}
.ppl-big-tracker__step:first-child { border-radius: 999px 0 0 999px; }
.ppl-big-tracker__step:last-child { border-right: 0; border-radius: 0 999px 999px 0; }
.ppl-big-tracker__step:only-child { border-radius: 999px; }
.ppl-big-tracker__step.is-completed { background: linear-gradient(100deg, #7c3aed, #8b5cf6); color: #fff; }
.ppl-big-tracker__step.is-active { background: linear-gradient(100deg, #f00099, #ff5bc0); color: #fff; box-shadow: 0 0 24px rgba(240,0,153,.45); z-index: 1; }
.ppl-big-tracker__icon {
	align-items: center;
	background: rgba(255,255,255,.16);
	border: 2px solid currentColor;
	border-radius: 999px;
	display: flex;
	height: 34px;
	justify-content: center;
	width: 34px;
}
.ppl-big-tracker__step.is-pending .ppl-big-tracker__icon { background: transparent; border-color: rgba(255,255,255,.25); }
.ppl-big-tracker__icon svg { height: 16px; width: 16px; }
.ppl-big-tracker__label { font-size: .78rem; font-weight: 700; line-height: 1.25; }
.ppl-big-tracker__current { color: #b8b3c9; font-size: .95rem; margin: 0 0 2px; }
.ppl-big-tracker__current strong { color: #ff5bc0; }
.ppl-big-tracker__note { color: #9690a5; font-size: .8rem; font-style: italic; margin: 0; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-big-tracker__step { background: rgba(17,24,39,.04); border-right-color: rgba(17,24,39,.10); color: #6a6580; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-big-tracker__current { color: #55506b; }
@media (max-width: 720px) {
	.ppl-big-tracker__step { min-width: 88px; }
	.ppl-big-tracker__label { font-size: .68rem; }
}

/* ==========================================================================
   Set new password (auth card) — reveal toggle, strength meter, match hint.
   Scoped to .ppl-auth so the dashboard's own fields are untouched.
   ========================================================================== */

.ppl-auth .ppl-field__pw { display: block; position: relative; }

.ppl-auth .ppl-field__pw input { padding-right: 68px; }

.ppl-auth .ppl-field__reveal {
	background: transparent;
	border: 0;
	border-radius: 8px;
	color: #a1a1aa;
	cursor: pointer;
	font: inherit;
	font-size: .8rem;
	font-weight: 600;
	min-height: 36px;
	padding: 0 12px;
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
}

.ppl-auth .ppl-field__reveal:hover,
.ppl-auth .ppl-field__reveal:focus-visible { color: #fff; outline: 2px solid rgba(124, 108, 255, .55); outline-offset: 0; }

.ppl-auth .ppl-pw-meter {
	background: #26272b;
	border-radius: 999px;
	display: block;
	height: 4px;
	margin-top: 10px;
	overflow: hidden;
}

.ppl-auth .ppl-pw-meter > span {
	background: #dc2626;
	border-radius: inherit;
	display: block;
	height: 100%;
	transition: width .2s ease, background-color .2s ease;
	width: 0;
}

.ppl-auth .ppl-pw-meter > span[data-level="2"] { background: #f59e0b; }
.ppl-auth .ppl-pw-meter > span[data-level="3"] { background: #84cc16; }
.ppl-auth .ppl-pw-meter > span[data-level="4"] { background: #22c55e; }

.ppl-auth .ppl-field__hint {
	display: block;
	font-size: .78rem;
	line-height: 1.45;
	margin-top: 8px;
}

.ppl-auth .ppl-field__hint--error { color: #f87171; }

.ppl-auth .ppl-auth__subtitle strong { color: #fff; font-weight: 600; overflow-wrap: anywhere; }

.ppl-auth a.ppl-btn { text-align: center; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
	.ppl-auth .ppl-pw-meter > span { transition: none; }
}

/* ==========================================================================
   Sign-in brand panel — logo + always-visible headline.
   Themes often restyle h2 (colour/size/visibility); these selectors are
   specific enough to keep the brand panel's own type intact.
   ========================================================================== */

.ppl-auth-shell .ppl-auth-brand__logo {
	display: block;
	height: auto;
	max-height: 44px;
	max-width: 180px;
	object-fit: contain;
	width: auto;
}

.ppl-auth-shell .ppl-auth-brand .ppl-auth-brand__headline {
	color: #0b1220 !important;
	display: block !important;
	font-family: inherit;
	opacity: 1 !important;
	visibility: visible !important;
}

.ppl-auth-shell .ppl-auth-brand .ppl-auth-brand__body { color: #475569; }

@media (max-width: 899px) {
	.ppl-auth-shell .ppl-auth-brand__logo { max-height: 36px; }
	.ppl-auth-shell .ppl-auth-brand .ppl-auth-brand__headline { font-size: 1.75rem; line-height: 1.05; }
	.ppl-auth-shell .ppl-auth-brand .ppl-auth-brand__body { display: block; font-size: .9rem; }
}

/* ==================================================================== */
/* v1.43 — Service quantity, package episode stepper, ClickUp detail     */
/* ==================================================================== */
.ppl-order-card__qty { align-items: baseline; display: flex; gap: 8px; }
.ppl-order-card__qty strong { color: #fff; font-size: .9rem; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-order-card__qty strong { color: #12101f; }

.ppl-stepper { margin: 8px 0 10px; }
.ppl-stepper__label { color: #cbc7d9; display: block; font-size: .72rem; font-weight: 700; margin-bottom: 6px; }
.ppl-stepper__control {
	align-items: stretch;
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 10px;
	display: inline-flex;
	overflow: hidden;
}
.ppl-stepper__btn {
	background: rgba(255,255,255,.05);
	border: 0;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1;
	min-height: 40px;
	min-width: 40px;
}
.ppl-stepper__btn:hover:not(:disabled) { background: rgba(255,255,255,.12); }
.ppl-stepper__btn:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }
.ppl-stepper__btn:disabled { cursor: not-allowed; opacity: .35; }
.ppl-stepper__input {
	-moz-appearance: textfield;
	appearance: textfield;
	background: transparent;
	border: 0;
	border-left: 1px solid rgba(255,255,255,.16);
	border-right: 1px solid rgba(255,255,255,.16);
	color: #fff;
	font: inherit;
	font-size: .95rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	text-align: center;
	width: 3.4em;
}
.ppl-stepper__input::-webkit-outer-spin-button,
.ppl-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ppl-order-card__formula { color: #9690a5; font-size: .72rem; font-variant-numeric: tabular-nums; margin: 2px 0 8px; }

.ppl-client-dashboard[data-ppl-theme="light"] .ppl-stepper__label { color: #4a4560; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-stepper__control { border-color: rgba(17,24,39,.18); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-stepper__btn { background: #f6f5fa; color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-stepper__btn:hover:not(:disabled) { background: #ebe9f3; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-stepper__input { border-color: rgba(17,24,39,.18); color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-order-card__formula { color: #6a6580; }

.ppl-mrow__meta { color: #9690a5; display: block; font-size: .72rem; font-weight: 500; margin-top: 3px; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-mrow__meta { color: #6a6580; }

/* ==================================================================== */
/* 1.43.2 — Request confirmed (redesign)                                  */
/* ==================================================================== */
.ppl-rc { margin: 24px auto; max-width: 480px; padding: 28px 26px 22px; text-align: left; }
.ppl-rc__icon {
	align-items: center;
	background: linear-gradient(135deg, #ec4899, #8b5cf6);
	border-radius: 999px;
	box-shadow: 0 6px 18px rgba(139, 92, 246, .28);
	color: #fff;
	display: flex;
	height: 40px;
	justify-content: center;
	margin: 0 0 18px;
	width: 40px;
}
.ppl-rc__icon svg { height: 18px; width: 18px; }
.ppl-rc__title { color: #fff; font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 6px; }
.ppl-rc__lead { color: #cbc7d9; font-size: .92rem; margin: 0 0 12px; }
.ppl-rc__item { color: #a7a3bd; font-size: .78rem; margin: 0 0 22px; }
.ppl-rc__heading { color: #fff; font-size: .92rem; font-weight: 700; margin: 0 0 10px; }
.ppl-rc__list { display: grid; gap: 8px; list-style: none; margin: 0 0 14px; padding: 0; }
.ppl-rc__booked { background: rgba(255,255,255,.05); border-radius: 10px; display: grid; gap: 4px; padding: 12px 12px; }
.ppl-rc__booked-name { color: #f8f7ff; font-size: .8rem; font-weight: 500; letter-spacing: .01em; }
.ppl-rc__booked-date { color: #a7a3bd; font-size: .72rem; font-weight: 600; }
.ppl-rc__included { border-bottom: 1px solid rgba(255,255,255,.1); margin: 0 0 16px; padding: 2px 0 14px; }
.ppl-rc__included summary { color: #f8f7ff; cursor: pointer; font-size: .84rem; font-weight: 600; list-style-position: inside; }
.ppl-rc__included summary:focus-visible { border-radius: 4px; outline: 2px solid #8b5cf6; outline-offset: 3px; }
.ppl-rc__included ul { color: #cbc7d9; display: grid; font-size: .8rem; gap: 4px; margin: 10px 0 0; padding-left: 20px; }
.ppl-rc__credits { background: rgba(255,255,255,.05); border-radius: 14px; margin: 0 0 18px; padding: 16px 16px 14px; }
.ppl-rc__credits h2 { color: #fff; font-size: .86rem; font-weight: 700; margin: 0 0 10px; }
.ppl-rc__credits dl { margin: 0; }
.ppl-rc__row { align-items: baseline; display: flex; gap: 12px; justify-content: space-between; padding: 5px 0; }
.ppl-rc__row dt { color: #a7a3bd; font-size: .82rem; }
.ppl-rc__row dd { color: #f8f7ff; font-size: .82rem; font-variant-numeric: tabular-nums; font-weight: 700; margin: 0; }
.ppl-rc__row--total { border-top: 1px solid rgba(255,255,255,.1); margin-top: 8px; padding-top: 14px; }
.ppl-rc__row--total dt { color: #f8f7ff; font-weight: 600; }
.ppl-rc__row--total dd { color: #c084fc; font-size: 1.45rem; font-weight: 800; letter-spacing: -.01em; }
.ppl-rc__zero { border-top: 1px dashed rgba(255,255,255,.14); color: #cbc7d9; font-size: .78rem; margin: 12px 0 0; padding-top: 10px; }
.ppl-rc__zero a { color: #f0abfc; font-weight: 700; margin-left: 4px; }
.ppl-rc__continue {
	background: linear-gradient(90deg, #ec4899, #8b5cf6);
	border-radius: 10px;
	color: #fff !important;
	display: block;
	font-size: .88rem;
	font-weight: 700;
	padding: 12px 16px;
	text-align: center;
	text-decoration: none !important;
	transition: filter .15s ease, transform .15s ease;
}
.ppl-rc__continue:hover { filter: brightness(1.06); transform: translateY(-1px); }
.ppl-rc__continue:focus-visible { outline: 2px solid #8b5cf6; outline-offset: 3px; }
.ppl-rc__foot { color: #a7a3bd; font-size: .74rem; margin: 10px 0 0; text-align: center; }

.ppl-client-dashboard[data-ppl-theme="light"] .ppl-rc__title,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-rc__heading,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-rc__credits h2 { color: #1b1830; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-rc__lead { color: #3f3a55; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-rc__item,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-rc__booked-date,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-rc__row dt,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-rc__foot { color: #5a5570; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-rc__booked,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-rc__credits { background: #f6f1fd; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-rc__booked-name,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-rc__included summary,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-rc__row dd,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-rc__row--total dt { color: #1b1830; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-rc__included { border-bottom-color: rgba(17,24,39,.1); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-rc__included ul { color: #3f3a55; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-rc__row--total { border-top-color: rgba(17,24,39,.1); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-rc__row--total dd { color: #9b4dde; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-rc__zero { border-top-color: rgba(17,24,39,.14); color: #3f3a55; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-rc__zero a { color: #9b4dde; }

/* ==================================================================== */
/* 1.43.2 — My Workspace: roomier list cards                              */
/* ==================================================================== */
.ppl-work-group__head { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin: 0 0 14px; }
.ppl-work-group__head .ppl-work-group__name { font-size: 1.15rem; letter-spacing: -.015em; margin: 0; }
.ppl-work-group__count {
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 999px;
	color: #e9e5f4;
	flex: 0 0 auto;
	font-size: .76rem;
	font-weight: 600;
	padding: 5px 12px;
	white-space: nowrap;
}
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-work-group__count { background: #fff; border-color: rgba(17,24,39,.14); color: #2a2640; }

.ppl-episodes { gap: 10px; }
.ppl-episode { border-radius: 14px; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-episode { border-color: rgba(139, 92, 246, .16); }

.ppl-episode__head {
	display: grid;
	gap: 8px 18px;
	grid-template-columns: minmax(0, 1fr) auto auto;
	padding: 16px 18px;
}
.ppl-episode__main { display: grid; gap: 5px; min-width: 0; }
.ppl-episode__title { font-size: .95rem; font-weight: 700; justify-self: start; max-width: 100%; }
.ppl-episode__created { color: #a7a3bd; font-size: .78rem; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-episode__created { color: #5a5570; }

.ppl-episode__progress { align-items: flex-end; display: grid; gap: 6px; justify-items: end; width: 68px; }
.ppl-episode__progress .ppl-episode__bar { flex: none; height: 5px; width: 68px; }
.ppl-episode__progress .ppl-episode__pct { font-size: .74rem; font-weight: 600; min-width: 0; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-episode__progress .ppl-episode__bar { background: #ece4f8; }

.ppl-episode__head .ppl-episode__toggle-btn {
	background: rgba(192, 132, 252, .14);
	border: 1px solid rgba(192, 132, 252, .38);
	border-radius: 9px;
	color: #f3e8ff;
	font-size: .8rem;
	font-weight: 600;
	padding: 8px 13px;
	white-space: nowrap;
}
.ppl-episode__head .ppl-episode__toggle-btn:hover { background: rgba(192, 132, 252, .24); }
.ppl-episode__head .ppl-episode__toggle-btn:focus-visible { outline: 2px solid #8b5cf6; outline-offset: 2px; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-episode__head .ppl-episode__toggle-btn { background: #f5eefe; border-color: #dcc6f8; color: #2a1d4a; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-episode__head .ppl-episode__toggle-btn:hover { background: #ecdffd; }

/* Phones: name and date on top; progress and button share the row below. */
@media (max-width: 560px) {
	.ppl-episode__head { grid-template-columns: minmax(0, 1fr) auto; }
	.ppl-episode__main { grid-column: 1 / -1; }
	.ppl-episode__progress { align-items: center; display: flex; gap: 8px; width: auto; }
	/* Long names wrap to two lines instead of being cut off. */
	.ppl-episode__title { -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; }
}

/* ==========================================================================
   Review your request — order confirmation modal (v1.44.2)
   Layout: title + subtitle, service row with icon tile, divider, balance
   rows, highlighted "balance after" box, gradient CTA, footnote.
   Dark is the portal default; light matches the reference exactly.
   ========================================================================== */
.ppl-review .ppl-review__panel {
	background: #17142a;
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 22px;
	box-shadow: 0 30px 80px rgba(0,0,0,.55);
	max-width: 420px;
	padding: 28px 28px 22px;
}
.ppl-review__close {
	align-items: center;
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 10px;
	color: #a7a1b8;
	cursor: pointer;
	display: flex;
	height: 34px;
	justify-content: center;
	position: absolute;
	right: 18px;
	top: 20px;
	transition: background-color .2s, color .2s;
	width: 34px;
}
.ppl-review__close:hover { background: rgba(255,255,255,.08); color: #ffffff; }
.ppl-review__close:focus-visible { outline: 2px solid #c06cf5; outline-offset: 2px; }

.ppl-review__head { margin: 0 44px 22px 0; }
.ppl-review__title { color: #ffffff; font-size: 1.45rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; margin: 0; }
.ppl-review__sub { color: #a7a1b8; font-size: .9rem; line-height: 1.5; margin: 6px 0 0; }

.ppl-review__item { align-items: center; display: flex; gap: 14px; }
.ppl-review__icon {
	align-items: center;
	background: rgba(192,108,245,.16);
	border-radius: 12px;
	color: #d9a6ff;
	display: flex;
	flex: none;
	height: 44px;
	justify-content: center;
	width: 44px;
}
.ppl-review__item-text { min-width: 0; }
.ppl-review__name { color: #ffffff; font-size: 1.05rem; font-weight: 700; line-height: 1.3; margin: 0; overflow-wrap: anywhere; }
.ppl-review__meta { color: #a7a1b8; font-size: .84rem; line-height: 1.4; margin: 3px 0 0; }
.ppl-review__desc,
.ppl-review__includes { color: #a7a1b8; font-size: .82rem; line-height: 1.55; margin: 12px 0 0; }

.ppl-review__rows {
	border-top: 1px solid rgba(255,255,255,.1);
	display: grid;
	gap: 14px;
	margin: 20px 0 0;
	padding: 20px 0 0;
}
.ppl-review__row { align-items: baseline; display: flex; gap: 12px; justify-content: space-between; margin: 0; }
.ppl-review__row dt { color: #a7a1b8; font-size: .9rem; margin: 0; }
.ppl-review__row dd { color: #ffffff; font-size: .9rem; font-variant-numeric: tabular-nums; font-weight: 700; margin: 0; text-align: right; }

.ppl-review__after {
	align-items: center;
	background: rgba(192,108,245,.12);
	border-radius: 14px;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin-top: 18px;
	padding: 18px 18px;
}
.ppl-review__after-label { color: #d6cfe6; font-size: .92rem; }
.ppl-review__after-value { color: #ffffff; font-size: 1.45rem; font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
.ppl-review__after.is-short { background: rgba(239,68,68,.12); }
.ppl-review__after.is-short .ppl-review__after-value { color: #fca5a5; }

.ppl-review__cta {
	align-items: center;
	appearance: none;
	background: linear-gradient(90deg, #e9609f 0%, #c66bd6 50%, #9b6bf0 100%);
	border: 0;
	border-radius: 12px;
	box-shadow: 0 10px 24px -12px rgba(201,95,200,.8);
	color: #ffffff;
	cursor: pointer;
	display: flex;
	font-size: .95rem;
	font-weight: 600;
	justify-content: center;
	margin-top: 20px;
	min-height: 48px;
	padding: 12px 18px;
	transition: filter .2s, transform .2s;
	width: 100%;
}
.ppl-review__cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.ppl-review__cta:active { transform: translateY(0); }
.ppl-review__cta:focus-visible { outline: 2px solid #c06cf5; outline-offset: 3px; }
.ppl-review__cta.is-ghost { background: transparent; border: 1px solid rgba(255,255,255,.22); box-shadow: none; color: #ffffff; }

.ppl-review__note { color: #8f89a2; font-size: .78rem; margin: 12px 0 0; text-align: center; }

/* Light theme — matches the reference */
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-review .ppl-review__panel { background: #ffffff; border-color: #ece8f2; box-shadow: 0 24px 60px rgba(40,25,70,.16); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-review__close { color: #6b6680; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-review__close:hover { background: #f4f1f8; color: #1f1b2e; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-review__title,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-review__name,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-review__row dd,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-review__after-value { color: #1f1b2e; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-review__sub,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-review__meta,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-review__desc,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-review__includes,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-review__row dt { color: #6b6680; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-review__icon { background: #f5ecfa; color: #b05cc8; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-review__rows { border-top-color: #ece8f2; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-review__after { background: #f5ecf8; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-review__after-label { color: #3d3852; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-review__after.is-short { background: #fdecec; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-review__after.is-short .ppl-review__after-value { color: #c62828; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-review__cta.is-ghost { border-color: #d9d3e3; color: #1f1b2e; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-review__note { color: #6b6680; }

@media (max-width: 420px) {
	.ppl-review .ppl-review__panel { padding: 24px 20px 18px; }
	.ppl-review__title { font-size: 1.25rem; }
	.ppl-review__after-value { font-size: 1.25rem; }
}

/* ==========================================================================
   Big tracker — ClickUp status colours + active episode (1.40.2)
   Each step carries --ppl-step: the status colour from ClickUp, falling back
   to the built-in stage palette when ClickUp has none.
   ========================================================================== */

.ppl-big-tracker__step.is-completed,
.ppl-big-tracker__step.is-active {
	background: var(--ppl-step, #7c3aed);
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.ppl-big-tracker__step.is-completed { box-shadow: none; filter: saturate(.9); }

.ppl-big-tracker__step.is-active {
	box-shadow: 0 0 0 2px #fff inset, 0 0 26px var(--ppl-step, #f00099);
	filter: none;
	z-index: 1;
}

/* Upcoming steps still show their colour as a thin underline, so the whole
   status scale reads the same as in ClickUp. */
.ppl-big-tracker__step.is-pending { box-shadow: inset 0 -3px 0 var(--ppl-step, transparent); }

.ppl-big-tracker__current strong { text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }

/* The episode whose status the tracker is showing. */
.ppl-episode { transition: border-color .25s ease, box-shadow .25s ease; }

.ppl-episode.is-current {
	border-color: var(--ppl-ep-color, #ff5bc0);
	box-shadow: 0 0 0 1px var(--ppl-ep-color, #ff5bc0), 0 10px 28px -14px var(--ppl-ep-color, #ff5bc0);
	position: relative;
}

.ppl-episode.is-current::before {
	background: var(--ppl-ep-color, #ff5bc0);
	border-radius: 4px;
	bottom: 10px;
	content: "";
	left: 0;
	position: absolute;
	top: 10px;
	width: 4px;
}

.ppl-episode.is-current .ppl-episode__title { color: var(--ppl-ep-color, #ff5bc0); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-episode.is-current .ppl-episode__title { color: var(--ppl-ep-color, #c2007a); }

@media (prefers-reduced-motion: reduce) {
	.ppl-episode { transition: none; }
}

/* ==========================================================================
   Checkout popup — desktop width (1.45.1)
   Stripe's embedded Checkout only switches to its two-column desktop layout
   (order summary left, payment form right) once its frame is roughly
   1000px+ wide; at 1000px the panel left ~950px, so it fell back to the
   single-column phone layout. Give it room on desktop; phones unchanged.
   ========================================================================== */
.ppl-modal.ppl-checkout-modal .ppl-modal__panel.ppl-checkout-modal__panel {
	max-width: 1240px;
	width: min(1240px, calc(100vw - 48px));
	padding: 52px 20px 20px;
}

.ppl-checkout-modal__mount { width: 100%; }
.ppl-checkout-modal__mount iframe { width: 100% !important; }

@media (max-width: 600px) {
	.ppl-modal.ppl-checkout-modal .ppl-modal__panel.ppl-checkout-modal__panel {
		padding: 48px 12px 12px;
		width: calc(100vw - 20px);
	}
}

/* Whole episode card is clickable (1.46.0) — pointer, hover lift, and a
   "View in tracker" hint on hover. View details keeps its own button. */
.ppl-episode[data-ppl-card-select] { cursor: pointer; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.ppl-episode[data-ppl-card-select]:hover { border-color: var(--ppl-ep-color, rgba(255, 91, 192, .55)); transform: translateY(-1px); }
.ppl-episode[data-ppl-card-select]:not(.is-current):hover { box-shadow: 0 10px 26px -18px var(--ppl-ep-color, #ff5bc0); }
.ppl-episode[data-ppl-card-select] .ppl-episode__head { position: relative; }
.ppl-episode[data-ppl-card-select]:not(.is-current):hover .ppl-episode__title::after {
	content: "  · View in tracker ↑";
	font-size: .72rem;
	font-weight: 600;
	opacity: .65;
}
.ppl-episode[data-ppl-card-select] button,
.ppl-episode[data-ppl-card-select] a { cursor: pointer; }
@media (hover: none) {
	.ppl-episode[data-ppl-card-select]:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.ppl-episode[data-ppl-card-select] { transition: none; }
	.ppl-episode[data-ppl-card-select]:hover { transform: none; }
}

/* ==================================================================== */
/* 1.48.1                                                                 */
/* ==================================================================== */

/* 1.1 Sections on portal pages. Specificity (0,0,2): beats the theme's bare
   `section` rule (e.g. padding: 0 6vw 6vw) whichever stylesheet loads last,
   yet stays below every class rule — so the portal's own cards
   (.ppl-glass-card …) keep their padding, and sections without their own
   padding (the summary row) get none from the theme. */
html :where(.ppl-client-dashboard) section {
	position: relative;
	z-index: 1;
	padding: 0;
}

/* 1.2 Request confirmed: neutralise the theme's `.entry-content ul`
   indent (padding-left: 1.4em) and size its `.entry-content h2` at 26px. */
.ppl-client-dashboard .ppl-rc ul,
.entry-content .ppl-rc ul { padding-left: 0; }
.ppl-client-dashboard .ppl-rc__included ul,
.entry-content .ppl-rc__included ul { list-style-position: inside; }
.entry-content .ppl-rc h2,
.ppl-client-dashboard .ppl-rc h2 { font-size: 26px; }

/* 1.5 View Details: more compact deliverable names. */
.ppl-mrow-table td.ppl-mrow__name,
.ppl-mrow-table .ppl-mrow__name { font-size: .84rem; line-height: 1.35; }

/* 1.6 View Details for an episode with no subtasks: one paragraph. */
.ppl-mrow-table__hint--solo { line-height: 1.55; margin: 4px 4px 6px; }

/* 1.48.1 — light-mode tracker colours, white button text, softer shadows,
   custom card tooltip. */
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-big-tracker__step.is-completed,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-big-tracker__step.is-active { background: var(--ppl-step, #7c3aed); color: #fff; border-right-color: rgba(255,255,255,.35); text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-big-tracker__step.is-pending { background: color-mix(in srgb, var(--ppl-step, #9ca3af) 12%, #fff); color: #4b4660; box-shadow: inset 0 -3px 0 var(--ppl-step, transparent); }
.ppl-big-tracker__step.is-active { box-shadow: 0 0 0 2px rgba(255,255,255,.85) inset, 0 4px 12px -6px var(--ppl-step, #f00099) !important; }
.ppl-episode.is-current { box-shadow: 0 0 0 1px var(--ppl-ep-color, #ff5bc0), 0 4px 12px -10px var(--ppl-ep-color, #ff5bc0); }
.ppl-episode[data-ppl-card-select]:not(.is-current):hover { box-shadow: 0 4px 12px -10px var(--ppl-ep-color, #ff5bc0); }
.ppl-episode[data-ppl-card-select]:not(.is-current):hover .ppl-episode__title::after { content: none; }
.ppl-client-dashboard a.ppl-client-button:not(.is-ghost),
.ppl-client-dashboard a.ppl-client-button:not(.is-ghost):hover,
.ppl-client-dashboard a.ppl-client-button:not(.is-ghost):focus,
.ppl-client-dashboard a.ppl-client-button:not(.is-ghost):visited { color: #fff !important; text-decoration: none !important; }
/* Card tooltip — a single floating bubble on <body> (see portal.js), so no
   card or list container can clip it. */
.ppl-card-tip {
	position: fixed; z-index: 100000; left: 0; top: 0; max-width: min(280px, calc(100vw - 24px));
	padding: 7px 11px; border-radius: 9px; background: #17141f; color: #fff;
	font: 600 12px/1.35 inherit; font-family: inherit; text-align: center;
	box-shadow: 0 6px 16px -8px rgba(0,0,0,.45); pointer-events: none;
	opacity: 0; transform: translateY(4px); transition: opacity .16s ease, transform .16s ease;
}
.ppl-card-tip.is-visible { opacity: 1; transform: translateY(0); }
.ppl-card-tip::after { content: ""; position: absolute; left: var(--ppl-tip-x, 50%); top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: #17141f; }
.ppl-card-tip.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #17141f; }
.ppl-card-tip.is-light { background: #fff; color: #12101f; box-shadow: 0 6px 18px -8px rgba(17,24,39,.35), 0 0 0 1px rgba(17,24,39,.10); }
.ppl-card-tip.is-light::after { border-top-color: #fff; }
.ppl-card-tip.is-light.is-below::after { border-top-color: transparent; border-bottom-color: #fff; }

/* 1.48.5 — sticky mini progress tracker. */
.ppl-mini-tracker {
	position: fixed; z-index: 9990; display: flex; align-items: center; gap: 14px; box-sizing: border-box;
	padding: 10px 16px; border: 1px solid rgba(255,255,255,.10); border-radius: 14px; cursor: pointer;
	background: rgba(20,17,31,.92); color: #fff; font: inherit; text-align: left;
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	box-shadow: 0 8px 20px -12px rgba(0,0,0,.6);
	opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.ppl-mini-tracker.is-visible { opacity: 1; visibility: visible; transform: none; }
.ppl-mini-tracker__name { flex: 0 1 auto; min-width: 0; max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; font-weight: 700; }
.ppl-mini-tracker__steps { flex: 1 1 auto; display: flex; gap: 3px; min-width: 60px; }
.ppl-mini-tracker__steps i { flex: 1 1 0; height: 8px; border-radius: 99px; background: rgba(255,255,255,.12); }
.ppl-mini-tracker__steps i.is-completed, .ppl-mini-tracker__steps i.is-active { background: var(--ppl-step, #8b5cf6); }
.ppl-mini-tracker__steps i.is-active { height: 12px; margin-top: -2px; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.ppl-mini-tracker__status { flex: 0 0 auto; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.ppl-mini-tracker__up { flex: 0 0 auto; opacity: .6; font-size: .8rem; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-mini-tracker { background: rgba(255,255,255,.95); color: #12101f; border-color: rgba(17,24,39,.10); box-shadow: 0 8px 20px -12px rgba(17,24,39,.35); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-mini-tracker__steps i { background: rgba(17,24,39,.10); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-mini-tracker__steps i.is-completed, .ppl-client-dashboard[data-ppl-theme="light"] .ppl-mini-tracker__steps i.is-active { background: var(--ppl-step, #8b5cf6); }
@media (max-width: 640px) {
	.ppl-mini-tracker { flex-wrap: wrap; gap: 6px 10px; padding: 8px 12px; }
	.ppl-mini-tracker__name { max-width: none; flex: 1 1 0; }
	.ppl-mini-tracker__steps { order: 3; flex: 1 1 100%; }
	.ppl-mini-tracker__up { display: none; }
}

/* 1.48.6 — sticky mini tracker: glass panel with a soft neon edge in the
   current status colour, a gentle "live" dot and a slightly larger size. */
.ppl-mini-tracker {
	--ppl-mini-accent: #ff5bc0;
	gap: 16px; padding: 13px 20px; border-radius: 16px;
	background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03)), rgba(22,18,34,.72);
	-webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
	border: 1px solid color-mix(in srgb, var(--ppl-mini-accent) 55%, rgba(255,255,255,.18));
	box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 0 18px -6px var(--ppl-mini-accent), 0 10px 26px -16px rgba(0,0,0,.7);
}
.ppl-mini-tracker.is-visible { animation: ppl-mini-glow 3.2s ease-in-out infinite; }
@keyframes ppl-mini-glow {
	0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 0 14px -6px var(--ppl-mini-accent), 0 10px 26px -16px rgba(0,0,0,.7); }
	50%      { box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 24px -4px var(--ppl-mini-accent), 0 10px 26px -16px rgba(0,0,0,.7); }
}
.ppl-mini-tracker:hover { border-color: var(--ppl-mini-accent); }
.ppl-mini-tracker__dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--ppl-mini-accent); box-shadow: 0 0 0 0 var(--ppl-mini-accent); animation: ppl-mini-dot 2s ease-out infinite; }
@keyframes ppl-mini-dot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ppl-mini-accent) 70%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }
.ppl-mini-tracker__name { font-size: .86rem; }
.ppl-mini-tracker__steps i { height: 10px; }
.ppl-mini-tracker__steps i.is-active { height: 14px; }
.ppl-mini-tracker__status { font-size: .8rem; text-shadow: 0 0 10px color-mix(in srgb, var(--ppl-mini-accent) 45%, transparent); }
.ppl-mini-tracker__up { opacity: .75; font-size: .9rem; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-mini-tracker {
	background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.62)), rgba(255,255,255,.55);
	border-color: color-mix(in srgb, var(--ppl-mini-accent) 50%, rgba(17,24,39,.12));
	box-shadow: 0 0 16px -6px var(--ppl-mini-accent), 0 10px 24px -16px rgba(17,24,39,.35);
}
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-mini-tracker.is-visible { animation-name: ppl-mini-glow-light; }
@keyframes ppl-mini-glow-light {
	0%, 100% { box-shadow: 0 0 12px -6px var(--ppl-mini-accent), 0 10px 24px -16px rgba(17,24,39,.35); }
	50%      { box-shadow: 0 0 22px -4px var(--ppl-mini-accent), 0 10px 24px -16px rgba(17,24,39,.35); }
}
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-mini-tracker__status { text-shadow: none; }
@media (max-width: 640px) { .ppl-mini-tracker { padding: 10px 14px; gap: 8px 10px; } }
@media (prefers-reduced-motion: reduce) { .ppl-mini-tracker.is-visible, .ppl-mini-tracker__dot { animation: none; } }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-mini-tracker__steps i.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ppl-step, #8b5cf6); }

/* 1.49.0 — tracker icons (Font Awesome), readable light-mode steps,
   paged billing lists, richer profile. */
.ppl-big-tracker__icon i { font-size: 14px; line-height: 1; }
.ppl-big-tracker__step.is-pending .ppl-big-tracker__icon { color: var(--ppl-step, rgba(255,255,255,.6)); border-color: color-mix(in srgb, var(--ppl-step, #fff) 65%, transparent); background: rgba(255,255,255,.06); }
.ppl-big-tracker__step.is-pending .ppl-big-tracker__label { opacity: .85; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-big-tracker__step.is-pending { color: #2f2a44; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-big-tracker__step.is-pending .ppl-big-tracker__icon { color: color-mix(in srgb, var(--ppl-step, #6b7280) 80%, #1f1b2e); border-color: color-mix(in srgb, var(--ppl-step, #6b7280) 75%, #1f1b2e); background: #fff; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-big-tracker__step.is-pending .ppl-big-tracker__label { opacity: 1; font-weight: 700; }
.ppl-mini-tracker__up i { font-size: .8rem; }

.ppl-ledger-item[hidden] { display: none !important; }
.ppl-ledger-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; }
.ppl-ledger-pager button { min-width: 34px; height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--ppl-client-line, rgba(255,255,255,.12)); background: rgba(255,255,255,.04); color: inherit; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }
.ppl-ledger-pager button:hover:not(:disabled) { border-color: #ff5bc0; }
.ppl-ledger-pager button.is-active { background: linear-gradient(100deg, #f09, #8b5cf6); border-color: transparent; color: #fff; }
.ppl-ledger-pager button:disabled { opacity: .35; cursor: default; }
.ppl-ledger-pager__gap { opacity: .6; padding: 0 2px; }
.ppl-ledger-pager__info { flex-basis: 100%; text-align: center; font-size: .72rem; opacity: .65; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-ledger-pager button { border-color: rgba(17,24,39,.14); background: #fff; color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-ledger-pager button.is-active { color: #fff; background: linear-gradient(100deg, #f09, #8b5cf6); }

.ppl-profile-hero { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ppl-profile-hero__avatar { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; font-size: 1.5rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #f09, #8b5cf6); box-shadow: 0 8px 20px -12px rgba(240,0,153,.7); }
.ppl-profile-hero__main { flex: 1 1 260px; min-width: 0; }
.ppl-profile-hero__main h2 { margin: 0 0 8px; font-size: 1.3rem; overflow-wrap: anywhere; }
.ppl-profile-hero__bday { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 3px 10px; border-radius: 99px; font-size: .72rem; font-weight: 700; color: #fff; background: linear-gradient(100deg, #f09, #f59e0b); vertical-align: middle; }
.ppl-profile-hero__facts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: .8rem; color: var(--ppl-client-muted, #a39fb5); }
.ppl-profile-hero__facts li { display: inline-flex; align-items: center; gap: 7px; min-width: 0; overflow-wrap: anywhere; }
.ppl-profile-hero__facts i { color: #ff5bc0; width: 14px; text-align: center; }
.ppl-profile-hero__meter { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; max-width: 220px; font-size: .74rem; color: var(--ppl-client-muted, #a39fb5); }
.ppl-profile-hero__ring { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#ff5bc0 calc(var(--ppl-pct) * 1%), rgba(255,255,255,.10) 0); }
.ppl-profile-hero__ring strong { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #17141f; color: #fff; font-size: .78rem; }
.ppl-profile-form__section h3 i, .ppl-field label i { color: #ff5bc0; margin-right: 4px; font-size: .85em; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-hero__ring { background: conic-gradient(#f09 calc(var(--ppl-pct) * 1%), rgba(17,24,39,.08) 0); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-hero__ring strong { background: #fff; color: #12101f; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-hero__facts { color: #55506b; }
@media (max-width: 640px) { .ppl-profile-hero__meter { max-width: none; flex: 1 1 100%; } }

/* 1.49.1 — profile spacing, lighter upcoming tracker icons. */
.ppl-profile-hero { padding: 24px 28px !important; gap: 22px 24px; margin-bottom: 22px; }
.ppl-profile-hero__main h2 { color: #fff; font-size: 1.4rem; line-height: 1.25; margin: 0 0 10px; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-profile-hero__main h2 { color: #12101f; }
.ppl-profile-hero__facts { gap: 8px 20px; }
.ppl-profile-hero__meter { max-width: 240px; line-height: 1.4; padding-left: 8px; }
.ppl-profile-hero__meter span { white-space: normal; }
.ppl-profile-form { padding: 6px 4px; }
.ppl-profile-form__grid { gap: 18px 20px !important; }
.ppl-profile-form__section { margin-top: 28px !important; padding-top: 24px !important; }
.ppl-profile-form__section > p { margin: 0 0 16px; }
.ppl-profile-form__foot { margin-top: 26px; }
.ppl-field label { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; }
@media (max-width: 640px) { .ppl-profile-hero { padding: 20px !important; } .ppl-profile-hero__meter { padding-left: 0; } }
/* Upcoming steps: soft, light icons so the current step stands out. */
.ppl-big-tracker__step.is-pending .ppl-big-tracker__icon { opacity: .55; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-big-tracker__step.is-pending .ppl-big-tracker__icon { color: var(--ppl-step, #9ca3af); border-color: color-mix(in srgb, var(--ppl-step, #9ca3af) 60%, #fff); background: rgba(255,255,255,.7); opacity: .7; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-big-tracker__step.is-pending .ppl-big-tracker__label { color: #5c5672; font-weight: 600; }

/* 1.50.0 - plan icons, referrals. */
.ppl-plan-card__icon i { font-size: 1.05rem; line-height: 1; }

.ppl-ref-hero { display: grid; gap: 16px; padding: 26px 28px !important; margin-bottom: 18px; }
.ppl-ref-hero__main { display: flex; align-items: center; gap: 16px; }
.ppl-ref-hero__icon { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 1.3rem; color: #fff; background: linear-gradient(135deg, #f09, #8b5cf6); }
.ppl-ref-hero__text h2 { margin: 0 0 4px; font-size: 1.15rem; }
.ppl-ref-hero__text p { margin: 0; color: var(--ppl-client-muted, #a39fb5); font-size: .82rem; }
.ppl-ref-copy { display: flex; gap: 10px; flex-wrap: wrap; }
.ppl-ref-copy input { flex: 1 1 260px; min-width: 0; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--ppl-client-line, rgba(255,255,255,.12)); background: rgba(255,255,255,.05); color: inherit; font: inherit; font-size: .85rem; }
.ppl-ref-copy .ppl-client-button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; margin: 0 !important; border: 0; cursor: pointer; }
.ppl-ref-copy .ppl-client-button.is-copied { background: linear-gradient(100deg, #16a34a, #35e59a) !important; }
.ppl-ref-hero__code { margin: 0; font-size: .78rem; color: var(--ppl-client-muted, #a39fb5); }
.ppl-ref-hero__code strong { letter-spacing: .12em; color: #ff5bc0; }
.ppl-ref-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.ppl-ref-stat { display: grid; gap: 4px; padding: 18px; border-radius: 16px; border: 1px solid var(--ppl-client-line, rgba(255,255,255,.1)); background: rgba(255,255,255,.04); }
.ppl-ref-stat i { color: #ff5bc0; font-size: 1rem; }
.ppl-ref-stat strong { font-size: 1.5rem; line-height: 1.1; }
.ppl-ref-stat span { font-size: .74rem; color: var(--ppl-client-muted, #a39fb5); }
.ppl-ref-stat.is-earned i { color: #35e59a; }
.ppl-ref-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.ppl-ref-grid > .ppl-glass-card { margin: 0; }
.ppl-ref-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ppl-ref-steps li { display: flex; gap: 14px; align-items: flex-start; }
.ppl-ref-steps li > span { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #ff5bc0; background: rgba(240,0,153,.12); }
.ppl-ref-steps strong { display: block; margin-bottom: 2px; }
.ppl-ref-steps p { margin: 0; font-size: .8rem; color: var(--ppl-client-muted, #a39fb5); }
.ppl-ref-form { display: grid; gap: 14px; }
.ppl-ref-form .ppl-client-button { justify-self: start; display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; margin: 4px 0 0 !important; }
.ppl-ref-status { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 5px 11px; border-radius: 99px; font-size: .72rem; font-weight: 700; white-space: nowrap; background: rgba(255,255,255,.07); }
.ppl-ref-status b { color: #35e59a; }
.ppl-ref-status.is-signed_up { color: #60a5fa; }
.ppl-ref-status.is-qualified { color: #f59e0b; }
.ppl-ref-status.is-approved { color: #22c55e; }
.ppl-ref-status.is-rejected { color: #f87171; }
.ppl-ref-teaser { display: flex; align-items: center; gap: 16px; padding: 18px 24px !important; margin-bottom: 22px; text-decoration: none !important; color: inherit !important; flex-wrap: wrap; }
.ppl-ref-teaser__icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #f09, #8b5cf6); }
.ppl-ref-teaser__text { flex: 1 1 220px; display: grid; gap: 2px; }
.ppl-ref-teaser__text small { color: var(--ppl-client-muted, #a39fb5); }
.ppl-ref-teaser__go { font-size: .8rem; font-weight: 700; color: #ff5bc0; display: inline-flex; align-items: center; gap: 6px; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-ref-copy input { background: #fff; border-color: rgba(17,24,39,.14); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-ref-stat { background: #fff; border-color: rgba(17,24,39,.08); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-ref-status { background: rgba(17,24,39,.05); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-ref-status.is-qualified { color: #b45309; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-ref-status.is-approved { color: #15803d; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-ref-status.is-signed_up { color: #2563eb; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-ref-status.is-rejected { color: #dc2626; }
@media (max-width: 900px) { .ppl-ref-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ppl-ref-grid { grid-template-columns: 1fr; } }
/* Referrals 1.53.1 — affiliate states, click spark, kit, introductions. */
.ppl-ref-status.is-pending, .ppl-ref-status.is-introduced, .ppl-ref-status.is-talking { color: #f59e0b; }
.ppl-ref-status.is-paid, .ppl-ref-status.is-customer { color: #22c55e; }
.ppl-ref-status.is-not_fit, .ppl-ref-status.is-expired, .ppl-ref-status.is-duplicate { color: #a39fb5; }
.ppl-refc-banner { display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px !important; margin-bottom: 18px; border: 1px solid rgba(245,158,11,.35) !important; }
.ppl-refc-banner.is-good { border-color: rgba(53,229,154,.4) !important; }
.ppl-refc-banner.is-warn { border-color: rgba(248,113,113,.4) !important; }
.ppl-refc-banner__icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #ffffff; background: linear-gradient(135deg, #f59e0b, #ff5bc0); }
.ppl-refc-banner.is-good .ppl-refc-banner__icon { background: linear-gradient(135deg, #16a34a, #35e59a); }
.ppl-refc-banner.is-warn .ppl-refc-banner__icon { background: linear-gradient(135deg, #dc2626, #f87171); }
.ppl-refc-banner strong { display: block; font-size: 1rem; margin-bottom: 4px; }
.ppl-refc-banner p { margin: 0; font-size: .84rem; color: #a39fb5; }
.ppl-refc-track { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ppl-refc-track li { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; color: #a39fb5; }
.ppl-refc-track li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 700; background: rgba(255,255,255,.08); }
.ppl-refc-track li.is-done span { background: #16a34a; color: #ffffff; }
.ppl-refc-track li.is-now { color: #f59e0b; font-weight: 700; }
.ppl-refc-track li.is-now span { background: #f59e0b; color: #1a1625; }
.ppl-refc-mini { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 4px 10px; border-radius: 99px; border: 1px solid rgba(255,91,192,.4); background: transparent; color: #ff5bc0; font-size: .72rem; font-weight: 700; cursor: pointer; }
.ppl-refc-mini.is-copied { border-color: #35e59a; color: #35e59a; }
.ppl-refc-spark { display: flex; align-items: flex-end; gap: 4px; height: 90px; padding-top: 6px; }
.ppl-refc-spark span { flex: 1 1 0; min-width: 3px; border-radius: 4px 4px 2px 2px; background: rgba(255,255,255,.08); }
.ppl-refc-spark span.is-on { background: linear-gradient(180deg, #ff5bc0, #8b5cf6); }
.ppl-refc-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ppl-refc-check { display: flex; gap: 10px; align-items: flex-start; font-size: .8rem; color: #a39fb5; cursor: pointer; }
.ppl-refc-check input { margin-top: 2px; accent-color: #ff5bc0; }
.ppl-ref-form textarea { width: 100%; min-height: 64px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: inherit; font: inherit; resize: vertical; }
.ppl-refc-kit { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.ppl-refc-kit__item { display: grid; gap: 10px; align-content: start; padding: 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); }
.ppl-refc-kit__item img { width: 100%; height: 140px; object-fit: contain; border-radius: 10px; background: #0f0c18; }
.ppl-refc-kit__item p { margin: 0; font-size: .8rem; color: #a39fb5; }
.ppl-refc-kit__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ppl-refc-kit__actions .ppl-refc-mini { margin-left: 0; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-refc-banner p,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-refc-check,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-refc-kit__item p,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-refc-track li { color: #6b7280; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-refc-track li span,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-refc-spark span { background: rgba(17,24,39,.08); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-refc-spark span.is-on { background: linear-gradient(180deg, #ff5bc0, #8b5cf6); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-refc-kit__item { background: #ffffff; border-color: rgba(17,24,39,.08); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-refc-kit__item img { background: #f3f4f6; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-ref-form textarea { background: #ffffff; border-color: rgba(17,24,39,.14); }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-ref-status.is-pending,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-ref-status.is-introduced,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-ref-status.is-talking { color: #b45309; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-ref-status.is-paid,
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-ref-status.is-customer { color: #15803d; }
@media (max-width: 640px) { .ppl-refc-two { grid-template-columns: 1fr; } .ppl-refc-banner { flex-direction: column; } }

/* Sign-in screen: "Sign in" / "Become a referrer" tabs (1.53.2). */
.ppl-auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 22px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.ppl-auth-tabs__tab { height: 38px; border: 0; border-radius: 9px; background: transparent; color: #9ca3af; font: inherit; font-size: .8rem; font-weight: 600; white-space: nowrap; padding: 0 8px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.ppl-auth-tabs__tab:hover { color: #ffffff; }
.ppl-auth-tabs__tab.is-active { background: #7c6cff; color: #ffffff; }
.ppl-auth-tabs__tab:focus-visible { outline: 2px solid #7c6cff; outline-offset: 2px; }
.ppl-auth .ppl-field textarea { min-height: 64px; resize: vertical; font-family: inherit; }
.ppl-auth .ppl-checkbox a { color: #a5b4fc; }
.ppl-auth-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.ppl-auth-note { margin: 16px 0 0; font-size: .78rem; color: #9ca3af; text-align: center; }


@media (max-width: 480px) { .ppl-ref-hero { padding: 20px !important; } .ppl-ref-copy .ppl-client-button { width: 100%; justify-content: center; } .ppl-ref-stat strong { font-size: 1.25rem; } }

/* 1.51.0 - referral code box. */
.ppl-ref-code { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 22px !important; margin-bottom: 18px; }
.ppl-ref-code__icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #f09, #8b5cf6); }
.ppl-ref-code__text { flex: 1 1 220px; display: grid; gap: 2px; }
.ppl-ref-code__text small { color: var(--ppl-client-muted, #a39fb5); }
.ppl-ref-code__form { display: flex; gap: 8px; flex: 1 1 280px; max-width: 380px; }
.ppl-ref-code__form input { flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--ppl-client-line, rgba(255,255,255,.14)); background: rgba(255,255,255,.05); color: inherit; font: inherit; text-transform: uppercase; letter-spacing: .08em; }
.ppl-ref-code__form .ppl-client-button { flex: 0 0 auto; border: 0; cursor: pointer; margin: 0 !important; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-ref-code__form input { background: #fff; border-color: rgba(17,24,39,.14); }
@media (max-width: 480px) { .ppl-ref-code__form { max-width: none; flex-basis: 100%; } }

/* 1.52.0 - referral landing page [podify_referral]. */
.ppl-reflp { max-width: 640px; margin: 40px auto; padding: 0 16px; box-sizing: border-box; font-family: inherit; }
.ppl-reflp *, .ppl-reflp *::before, .ppl-reflp *::after { box-sizing: border-box; }
.ppl-reflp__card { position: relative; overflow: hidden; padding: 40px 36px; border-radius: 24px; color: #fff; background: radial-gradient(120% 90% at 100% 0, rgba(240,0,153,.35), transparent 60%), radial-gradient(90% 80% at 0 100%, rgba(139,92,246,.35), transparent 60%), #120f1f; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 24px 60px -30px rgba(240,0,153,.45); }
.ppl-reflp__badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: rgba(255,255,255,.08); color: #ff8ad0; }
.ppl-reflp__title { margin: 16px 0 8px; font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.15; color: #fff; }
.ppl-reflp__offer { display: inline-block; margin: 4px 0 14px; padding: 8px 16px; border-radius: 12px; font-weight: 800; font-size: 1.05rem; background: linear-gradient(100deg, #f09, #8b5cf6); color: #fff; }
.ppl-reflp__lede { margin: 0 0 24px; color: #c9c4da; line-height: 1.55; }
.ppl-reflp__form { display: grid; gap: 14px; }
.ppl-reflp__field { display: grid; gap: 6px; font-size: .8rem; font-weight: 600; color: #d9d5e5; }
.ppl-reflp__field input { width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #fff; font: inherit; font-size: .95rem; }
.ppl-reflp__field input:focus { outline: none; border-color: #ff5bc0; box-shadow: 0 0 0 3px rgba(255,91,192,.2); }
.ppl-reflp__code { text-transform: uppercase; letter-spacing: .14em; font-weight: 700; }
.ppl-reflp__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; margin-top: 4px; border: 0; border-radius: 14px; cursor: pointer; font: inherit; font-weight: 800; font-size: 1rem; color: #fff !important; background: linear-gradient(100deg, #f09, #8b5cf6); box-shadow: 0 10px 24px -12px rgba(240,0,153,.7); }
.ppl-reflp__btn:hover { filter: brightness(1.08); }
.ppl-reflp__note { margin: 2px 0 0; font-size: .78rem; color: #a39fb5; }
.ppl-reflp__steps { list-style: none; margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid rgba(255,255,255,.1); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ppl-reflp__steps li { display: grid; justify-items: center; gap: 8px; text-align: center; font-size: .78rem; color: #c9c4da; }
.ppl-reflp__steps i { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #ff5bc0; background: rgba(240,0,153,.14); }
.ppl-reflp .ppl-alert { margin-bottom: 14px; }
@media (max-width: 520px) { .ppl-reflp__card { padding: 28px 20px; } .ppl-reflp__steps { grid-template-columns: 1fr; } .ppl-reflp__steps li { grid-template-columns: auto 1fr; justify-items: start; text-align: left; align-items: center; } }
.ppl-reflp__plans { max-width: 1240px; margin: 0 auto 40px; padding: 0 16px; }


/* Required-field marker (Account → Contact number) — v1.52.5 */
.ppl-field__req { color: #ff5bc0; font-weight: 700; margin-left: 2px; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-field__req { color: #d6247f; }

/* Account: email change hint (1.53.3). */
.ppl-client-dashboard .ppl-field__hint { display: block; margin-top: 6px; font-size: .74rem; color: #a39fb5; }
.ppl-client-dashboard[data-ppl-theme="light"] .ppl-field__hint { color: #6b7280; }