/* Persan Player : aplats sobres, sans dégradé, sans serif */
.ppl-root,
.ppl-root * {
	box-sizing: border-box;
	font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.ppl-root {
	--ppl-bg: #f3f4f5;
	--ppl-card: #ffffff;
	--ppl-text: #2d3238;
	--ppl-muted: #6b747c;
	--ppl-line: #d9dde0;
	--ppl-accent: #4f6b7a;
	--ppl-accent-dark: #3e5563;
	--ppl-active: #a5665a;
	--ppl-active-dark: #8a5248;
	background: var(--ppl-bg);
	color: var(--ppl-text);
	border-radius: 8px;
	padding: 20px;
	max-width: 760px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.45;
}

.ppl-root .ppl-card {
	background: var(--ppl-card);
	border: 1px solid var(--ppl-line);
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 16px;
}

.ppl-root h3.ppl-title {
	margin: 0 0 12px 0;
	padding: 0;
	font-size: 15px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ppl-text);
}

.ppl-root .ppl-main {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.ppl-root button.ppl-btn {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	border-radius: 6px;
	background: var(--ppl-accent);
	color: #ffffff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: 0;
	padding: 12px 22px;
	cursor: pointer;
	box-shadow: none;
	text-shadow: none;
	min-height: 44px;
}
.ppl-root button.ppl-btn:hover { background: var(--ppl-accent-dark); color: #ffffff; }
.ppl-root button.ppl-btn:focus-visible { outline: 3px solid #9fb4c0; outline-offset: 2px; }
.ppl-root button.ppl-btn.is-playing { background: var(--ppl-active); }
.ppl-root button.ppl-btn.is-playing:hover { background: var(--ppl-active-dark); }

.ppl-root button.ppl-btn-light {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var(--ppl-line);
	border-radius: 6px;
	background: #ffffff;
	color: var(--ppl-text);
	font-size: 14px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.2;
	padding: 8px 12px;
	cursor: pointer;
	box-shadow: none;
	min-height: 36px;
}
.ppl-root button.ppl-btn-light:hover { background: #eceef0; color: var(--ppl-text); }
.ppl-root button.ppl-btn-light:focus-visible { outline: 3px solid #9fb4c0; outline-offset: 2px; }

.ppl-root .ppl-status {
	color: var(--ppl-muted);
	font-size: 14px;
}
.ppl-root .ppl-status.is-error { color: var(--ppl-active-dark); font-weight: 600; }

/* Réglages */
.ppl-root .ppl-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-top: 1px solid var(--ppl-line);
}
.ppl-root .ppl-row:first-of-type { border-top: 0; }
.ppl-root .ppl-row-label { flex: 1 1 auto; font-size: 15px; }
.ppl-root .ppl-stepper { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.ppl-root .ppl-stepper button {
	appearance: none;
	-webkit-appearance: none;
	width: 40px;
	height: 40px;
	border: 1px solid var(--ppl-line);
	border-radius: 6px;
	background: #ffffff;
	color: var(--ppl-text);
	font-size: 20px;
	line-height: 1;
	padding: 0;
	cursor: pointer;
	box-shadow: none;
}
.ppl-root .ppl-stepper button:hover { background: #eceef0; }
.ppl-root .ppl-stepper button:disabled { opacity: 0.35; cursor: default; }
.ppl-root .ppl-stepper button:focus-visible { outline: 3px solid #9fb4c0; outline-offset: 2px; }
.ppl-root .ppl-value {
	min-width: 62px;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Liste des mots */
.ppl-root .ppl-listbar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}
.ppl-root .ppl-count { margin-left: auto; color: var(--ppl-muted); font-size: 14px; }

.ppl-root ul.ppl-list { list-style: none; margin: 0; padding: 0; }
.ppl-root ul.ppl-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 0;
	margin: 0;
	border-top: 1px solid var(--ppl-line);
}
.ppl-root ul.ppl-list li:first-child { border-top: 0; }
.ppl-root ul.ppl-list label {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 40px;
	cursor: pointer;
	font-size: 16px;
	margin: 0;
	padding: 0;
}
.ppl-root ul.ppl-list input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--ppl-accent);
	flex: 0 0 auto;
}
.ppl-root ul.ppl-list li.is-off label { color: var(--ppl-muted); }
.ppl-root ul.ppl-list button.ppl-btn-light { padding: 6px 10px; min-height: 32px; font-size: 13px; }

@media (max-width: 520px) {
	.ppl-root { padding: 12px; }
	.ppl-root .ppl-row { flex-wrap: wrap; }
}

.ppl-root p.ppl-save {
	margin: 10px 0 0 0;
	padding: 8px 0 0 0;
	border-top: 1px solid var(--ppl-line);
	font-size: 13px;
	color: var(--ppl-muted);
}
.ppl-root p.ppl-save.is-error { color: var(--ppl-active-dark); font-weight: 600; }

/* Recherche */
.ppl-root input.ppl-search {
	display: block;
	width: 100%;
	margin: 0 0 12px 0;
	padding: 10px 12px;
	min-height: 44px;
	font-size: 16px;
	color: var(--ppl-text);
	background: #ffffff;
	border: 1px solid var(--ppl-line);
	border-radius: 6px;
	box-shadow: none;
}
.ppl-root input.ppl-search:focus { outline: 3px solid #9fb4c0; outline-offset: 1px; border-color: var(--ppl-accent); }
.ppl-root ul.ppl-list li[hidden] { display: none; }
.ppl-root p.ppl-empty { margin: 8px 0 0 0; color: var(--ppl-muted); font-size: 15px; }
.ppl-root p.ppl-empty[hidden] { display: none; }

/* Sélections nommées */
.ppl-root select.ppl-select {
	display: block;
	width: 100%;
	min-height: 44px;
	margin: 0 0 10px 0;
	padding: 8px 12px;
	font-size: 16px;
	color: var(--ppl-text);
	background: #ffffff;
	border: 1px solid var(--ppl-line);
	border-radius: 6px;
	box-shadow: none;
}
.ppl-root select.ppl-select:focus { outline: 3px solid #9fb4c0; outline-offset: 1px; border-color: var(--ppl-accent); }
.ppl-root .ppl-prof-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ppl-root button.ppl-btn-light:disabled { opacity: 0.4; cursor: default; }
.ppl-root button.ppl-btn-light:disabled:hover { background: #ffffff; }
.ppl-root .ppl-prof-panel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	padding: 12px;
	background: var(--ppl-bg);
	border-radius: 6px;
}
.ppl-root .ppl-prof-panel[hidden], .ppl-root input.ppl-prof-input[hidden] { display: none; }
.ppl-root .ppl-prof-text { flex: 1 1 100%; font-size: 15px; font-weight: 600; }
.ppl-root input.ppl-prof-input {
	flex: 1 1 200px;
	min-height: 44px;
	padding: 8px 12px;
	font-size: 16px;
	color: var(--ppl-text);
	background: #ffffff;
	border: 1px solid var(--ppl-line);
	border-radius: 6px;
	box-shadow: none;
}
.ppl-root input.ppl-prof-input:focus { outline: 3px solid #9fb4c0; outline-offset: 1px; border-color: var(--ppl-accent); }
.ppl-root .ppl-prof-panel-btns { display: flex; gap: 8px; }
.ppl-root p.ppl-prof-msg { margin: 10px 0 0 0; font-size: 14px; color: var(--ppl-muted); min-height: 1px; }
.ppl-root p.ppl-prof-msg.is-error { color: var(--ppl-active-dark); font-weight: 600; }
.ppl-root p.ppl-prof-state { margin: 6px 0 0 0; font-size: 14px; color: var(--ppl-active-dark); }
.ppl-root p.ppl-prof-state:empty { display: none; }

/* Mode non connecté : un bouton par sélection */
.ppl-root .ppl-ro-list { display: flex; flex-direction: column; gap: 12px; }
.ppl-root button.ppl-btn.ppl-ro-btn {
	width: 100%;
	min-height: 60px;
	font-size: 18px;
	text-align: center;
}
.ppl-root button.ppl-btn.is-paused { background: #7a8b8f; }
.ppl-root button.ppl-btn.is-paused:hover { background: #66767a; }
.ppl-root p.ppl-ro-status { margin: 12px 0 0 0; min-height: 1px; text-align: center; }
.ppl-root p.ppl-ro-status:empty { display: none; }