/* ── Arial Narrow: locale se installato, altrimenti Archivo Narrow (OFL) — versione demo web ── */
@font-face { font-family: 'Arial Narrow'; src: local('Arial Narrow'), local('ArialNarrow'), url('../font/ArchivoNarrow.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'Arial Narrow'; src: local('Arial Narrow Bold'), local('ArialNarrow-Bold'), url('../font/ArchivoNarrow.ttf') format('truetype'); font-weight: bold; font-style: normal; font-display: swap; }
@font-face { font-family: 'Arial Narrow'; src: local('Arial Narrow Italic'), local('ArialNarrow-Italic'), url('../font/ArchivoNarrow-Italic.ttf') format('truetype'); font-weight: normal; font-style: italic; font-display: swap; }
@font-face { font-family: 'Arial Narrow'; src: local('Arial Narrow Bold Italic'), local('ArialNarrow-BoldItalic'), url('../font/ArchivoNarrow-Italic.ttf') format('truetype'); font-weight: bold; font-style: italic; font-display: swap; }

/* ── Inter bundled (font variabile, licenza OFL) — selezionabile dal pannello ── */
@font-face {
	font-family: 'Inter';
	src: url('../font/Inter.ttf') format('truetype');
	font-weight: 100 900;
	font-style: normal;
	font-display: block;
}
@font-face {
	font-family: 'Inter';
	src: url('../font/Inter-Italic.ttf') format('truetype');
	font-weight: 100 900;
	font-style: italic;
	font-display: block;
}

* {
	padding: 0;
	margin: 0;
	outline: none;
}

*,
*:before,
*:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	background-color: black;
	/* font-family: 'Open Sans', sans-serif; */
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	color: #fff;
}

body,
html {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

header {
	position: fixed;
	bottom: 0;
	background-color: #000000;
	width: 100%;
	border-top: 1px solid #333;
	display: flex;
	flex-direction: column;
	z-index: 9999;
	transition: border-color 0.7s ease, background-color 0.7s ease, opacity 0.7s;
}

/* ── Compact bar (always visible) ─────────────────────────────── */
.ap-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	min-height: 48px;
	flex-shrink: 0;
}

/* ── Speed slider inline in bar ───────────────────────────────── */
.ap-speed-inline {
	flex: 0 1 200px;
	min-width: 120px;
}

/* ── Panel toggle button ──────────────────────────────────────── */
.ap-panel-toggle {
	margin-left: auto;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

header.panel-open .ap-panel-toggle {
	transform: rotate(90deg);
}

/* ── Expandable panel ─────────────────────────────────────────── */
.ap-panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease, opacity 0.25s ease;
	opacity: 0;
	border-top: 1px solid transparent;
}

header.panel-open .ap-panel {
	max-height: 300px;
	opacity: 1;
	border-top-color: #333;
}

.ap-panel-inner {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	flex-wrap: wrap;
}



header * {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: -moz-none;
	-ms-user-select: none;
	user-select: none;
}

/*Orologio*/
header h1 {
	font-weight: normal;
	display: inline-block;
	z-index: 10;
	text-indent: 10px;
	color: #000000;
	transition: color 1s ease;
	font-size: 2em;
	white-space: nowrap;
}


header h2 {
	font-weight: normal;
	display: inline-block;
	z-index: 10;
	text-indent: 10px;
	color: #4297d7;
	padding: 8px 0;
}

header h1 span.timer {
	padding-left: 6px;
}

header.notimer h1 span.timer {
	visibility: hidden;
}

header nav label {
	margin: 3px 0;
	display: inline-block;
	z-index: 10;
}

article {
	position: relative;
	height: 100%;
	overflow: auto;
	background-color: transparent;
	font-family: 'Arial Narrow', Arial, sans-serif;
	font-weight: normal;
	z-index: 4;
}


body.playing article {
	overflow: hidden;
}

/* Gestione header */

header.hmenu.notimer {
	opacity: 0%;
	pointer-events: none;
}

header.hmenu.notimer.clockon {
	height: 5px !important;
	opacity: 1;
	pointer-events: auto;
	overflow: hidden;
}

.flag-ok {
	background-color: #06e806;
}

.flag-ko {
	background-color: red;
}

header.flag-none h1 {
	color: white;
}


header .semaphore {
	background-color: #000000;
	flex: 0 1 auto;
	min-width: 40px;
	overflow: hidden;
	display: flex;
	align-items: center;
	padding: 6px 0;
	transition: background-color 0.7s ease;
}

.noClock.flag-none {
	height: 0px;
}

header.flag-none.hmenu.notimer .semaphore {
	visibility: hidden;
}


header .logo {
	height: 44px;
	width: auto;
	max-width: 200px;
	flex-shrink: 0;
	padding: 1px 3px;
	transition: background-color 0.7s;
	display: flex;
	align-items: center;
}

.logo.flag-none {
	background-color: #333;
}

header .logo img {
	height: 100%;
	width: auto;
}

header.hmenu .logo {
	display: none;
}


header nav {
	font-size: 12px;
	z-index: 10;
	position: relative;
}

header nav .buttons {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	height: auto;
}



header.flag-none.hmenu.notimer .ui-widget-header {
	visibility: hidden;
}

header.flag-ko .ui-widget-header {
	background-color: red !important;
}

header.flag-ok .ui-widget-header {
	background-color: #06e806 !important;
}

header.flag-ko .button.active {
	color: red !important;
}

header.flag-ok .button.active {
	color: #06e806 !important;
}

header.flag-ko .button {
	color: red !important;
}

header.flag-ok .button {
	color: #06e806 !important;
}

/********************/

footer {
	width: 100%;
	background-color: #111;
	border-top: 1px solid #333;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	padding: 8px 12px;
	z-index: 15;
	overflow: hidden;
	max-height: 80px;
	transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;
}

.nofooter {
	max-height: 0;
	padding: 0 12px;
	opacity: 0;
	pointer-events: none;
}

.timersettings{
	flex: 1 1 100%;
}



orologio {
	background-color: rgb(0, 0, 0);
	position: fixed;
	top: 0px;
	z-index: 4;
	width: 100%;
	height: 69px;
	transition: background-color 0.7s;
}

.semaforoON {
	background-color: rgba(0, 0, 0, 0);
}

#clockBox{
	color: yellow;
	background-color: #0000008a;
	margin-left: 20px;
	margin-right: 20px;
}

#counterBox{
	color: rgb(255, 255, 255);
	background-color: #0000008a;
	margin-left: 20px;
	margin-right: 20px;
}

#countdownBox{
	color: rgb(0, 255, 255);
	background-color: #0000008a;
	margin-left: 20px;
	margin-right: 20px;
}


#clock {
	text-align: center;
	font-family: 'Segoe UI', 'Arial Narrow', Arial, Helvetica, sans-serif;
	font-weight: 300;
	font-variant-numeric: tabular-nums;
	letter-spacing: 2px;
	font-size: 55px;
	margin-left: 4px;
	margin-right: 4px;
	margin-top: -22px;
	margin-bottom: -16px;
}

#mycounter {
	text-align: center;
	font-family: 'Segoe UI', 'Arial Narrow', Arial, Helvetica, sans-serif;
	font-weight: 300;
	font-variant-numeric: tabular-nums;
	letter-spacing: 2px;
	font-size: 55px;
	margin-left: 4px;
	margin-right: 4px;
	margin-top: -22px;
	margin-bottom: -16px;
}

#mycountdown {
	text-align: center;
	font-family: 'Segoe UI', 'Arial Narrow', Arial, Helvetica, sans-serif;
	font-weight: 300;
	font-variant-numeric: tabular-nums;
	letter-spacing: 2px;
	font-size: 55px;
	margin-left: 4px;
	margin-right: 4px;
	margin-top: -22px;
	margin-bottom: -16px;
}

.noClock {
	visibility: hidden;
	display: none !important;
}

#blackout {
	display: flex;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	background-color: black;
	height: 0vh;
	width: 100vw;
	z-index: 1000;
	opacity: 100%;
	transition: height 1s ease;
}

#blackout.active {
	height: 100vh;
}

#testPattern {
	display: flex;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	background-color: black;
	height: 0vh;
	width: 100vw;
	z-index: 1000;
	opacity: 100%;
	transition: height 1s ease;
}

#testPattern.active {
	height: 100vh;
}

#logoTour {
	display: flex;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	background-color: black;
	height: 0vh;
	width: 100vw;
	z-index: 1000;
	opacity: 100%;
	transition: height 1s ease;
}

#logoTour.active {
	height: 100vh;
}

/* L'immagine ha sempre l'altezza dello schermo e viene adattata con
   object-fit: senza, il flex la stirava a 100vh deformando i loghi con
   proporzioni diverse dallo schermo. L'overflow nasconde l'immagine mentre
   l'overlay si chiude (altezza 0). */
#logoTour {
	overflow: hidden;
}

#logoTour img {
	flex-shrink: 0;
	width: 100vw;
	max-width: none;
	height: 100vh;
	object-fit: contain;
}


article .teleprompter {
	padding-top: 300px;
	padding-bottom: 1000px;
	font-size: 60px;
	line-height: 86px;
	z-index: 1;
	background-color: #141414;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	will-change: transform;
	cursor: cell;
}

article .teleprompter p {
	padding-bottom: 15px;
	margin-bottom: 15px;
	border-bottom: 1px solid #444;
}

article .teleprompter p:last-child {
	border-bottom: 1px solid #4297d7;
}

article .teleprompter.text-align-center {
	text-align: center;
}

article .teleprompter.flipx {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	transform: rotateY(180deg);
	z-index: 1;
	pointer-events: none;
	padding: 300px 50px 1000px 100px;
}

article .teleprompter.flipy {
	-webkit-transform: rotateX(180deg);
	-moz-transform: rotateX(180deg);
	-o-transform: rotateX(180deg);
	-ms-transform: rotateX(180deg);
	transform: rotateX(180deg);
	z-index: 1;
	pointer-events: none;
	padding: 1000px 50px 300px 100px;
}

article .teleprompter.flipxy {
	-webkit-transform: rotateX(180deg) rotateY(180deg);
	-moz-transform: rotateX(180deg) rotateY(180deg);
	-o-transform: rotateX(180deg) rotateY(180deg);
	-ms-transform: rotateX(180deg) rotateY(180deg);
	transform: rotateX(180deg) rotateY(180deg);
	z-index: 1;
	pointer-events: none;
	padding: 1000px 50px 300px 100px;
}

.inv {
	filter: invert(100%)
}

.sliders,
.buttons,
.colors {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.sliders label:first-child {
	margin-top: 0;
}

.sliders-items {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 300px;
	min-width: 200px;
	padding: 2px 0;
}


.colors {
	width: 64px;
	padding: 4px;
	text-align: center;
}

.buttons {
	margin: 0 4px !important;
	padding: 0;
	gap: 2px;
}

.slider {
	width: 110px;
	font-size: 12px;
	display: inline-block;
}

.button {
	color: #737373;
	text-decoration: none;
	width: 36px;
	height: 40px;
	font-size: 28px;
	line-height: 40px !important;
	text-align: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	border-radius: 6px;
	transition: background 0.15s;
}

.button:hover {
	background: rgba(255,255,255,0.08);
}

.button.small {
	font-size: 16px;
	width: 32px;
	height: 36px;
}

/* .button.active {
	color: #ffffff;
} */

.marker {
	position: fixed;
	left: 0;
	top: 500px;
	color: #4297d7;
	font-size: 40px;
	display: none;
	z-index: 100;
}

.overlay {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 64px;
	z-index: 100;
	overflow: visible;
}

.overlay .top {
	position: fixed;
	top: 64px;
	height: 100px;
	width: 100%;
	background-color: #000;
	background-color: rgba(0, 0, 0, 0.75);
	z-index: 10;
}

.overlay .bottom {
	position: fixed;
	top: 300px;
	height: 10000px;
	width: 100%;
	background-color: #000;
	background-color: rgba(0, 0, 0, 0.75);
	overflow: hidden;
	z-index: 10;
}

.color {
	border: 1px solid #fff;
	width: 44px;
	outline: none;
	margin: 4px 0;
}

.glyphicon {
	font-size: 26px !important;
	color: #4297d7;
}

::-webkit-scrollbar {
	display: none;
}

.ap-pointer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	width: 100%;
	height: 0px;
	z-index: 3;
}
.ap-pointer span {
	display: block;
	width: 180px;
	height: 5px;
	background: white;
	font-size: 0;
	line-height: 0;
	overflow: hidden;
}
/* Pointer reso trasparente per l'artista (resta per allineamento/marker dell'operatore) */
#pointer.ap-pointer-hidden {
	opacity: 0;
}
/* Feedback del toggle in toolbar: acceso = pointer visibile, spento = nascosto */
.button.pointer-toggle.active {
	color: lightgreen;
}

.ap-shortcutList {
	font-size: x-large;
	overflow: scroll;
	max-height: 100vh;
	color: #fff;
	background-color: #000;
}


.blinkText {
	animation: blinker 1s linear infinite;
  }
  
  @keyframes blinker {
	50% {
	  opacity: 0;
	}
  }


/* Liste nel teleprompter */

article .teleprompter ul {
	list-style-type: disc;
	padding-left: 1.5em;
	margin-bottom: 15px;
}

article .teleprompter ol {
	list-style-type: decimal;
	padding-left: 1.5em;
	margin-bottom: 15px;
}

article .teleprompter li {
	padding-bottom: 10px;
}

/* Marcatori nel testo (legacy .ap-marker badge) */

.ap-marker {
	display: none;
	font-size: 0.55em;
	background-color: #4297d7;
	color: #ffffff;
	padding: 2px 7px;
	border-radius: 3px;
	user-select: none;
	vertical-align: middle;
	font-weight: bold;
	letter-spacing: 1px;
	cursor: default;
}

/* Cursore minimal sul prompter — ripristinato in edit mode via JS (.hide-cursor) */
article.hide-cursor,
article.hide-cursor * {
	cursor: crosshair !important;
}

#teleprompter[contenteditable="true"] .ap-marker {
	display: inline-block;
}

/* Marcatori [data-marker]: sempre visibili con stile originale */
#teleprompter [data-marker] {
	display: block;
}

/* In edit mode: mostra il prefisso \t come indicatore grigio davanti al testo */
#teleprompter[contenteditable="true"] [data-marker]::before {
	content: "\\t ";
	color: #888888;
	font-size: 0.8em;
	font-weight: normal;
	font-style: normal;
}

/* Format Bar (appare sulla selezione in edit mode) */

#formatBar {
	display: none;
	position: fixed;
	z-index: 4000;
	background: #1c1c1c;
	border: 1px solid #3a3a3a;
	border-radius: 7px;
	padding: 5px 8px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.7);
	align-items: center;
	gap: 3px;
	white-space: nowrap;
	user-select: none;
}

#formatBar.visible { display: flex; }

.fmt-color-label {
	width: 28px;
	height: 28px;
	border-radius: 4px;
	font-weight: bold;
	font-size: 1rem;
	line-height: 28px;
	text-align: center;
	cursor: pointer;
	color: #fff;
}

.fmt-color-label:hover { background: #2a2a2a; outline: 1px solid #555; }

.fmt-bg-label {
	background-color: #ffff00;
	color: #000;
}

.fmt-sep {
	width: 1px;
	height: 20px;
	background: #3a3a3a;
	margin: 0 3px;
}

.fmt-btn {
	width: 28px;
	height: 28px;
	background: none;
	border: none;
	color: #bbb;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.85rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.fmt-btn:hover { background: #333; color: #fff; }

/* Palette colori (12 swatches Apple — 4×3) */

#fmtPalette {
	display: none;
	position: fixed;
	z-index: 4001;
	background: #1c1c1c;
	border: 1px solid #3a3a3a;
	border-radius: 6px;
	padding: 6px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.7);
	flex-wrap: wrap;
	width: 112px;
	gap: 4px;
}

#fmtPalette.visible { display: flex; }

.fmt-swatch {
	width: 22px;
	height: 22px;
	border-radius: 3px;
	cursor: pointer;
	border: 1px solid rgba(255,255,255,0.15);
	box-sizing: border-box;
}

.fmt-swatch:hover {
	border-color: #fff;
	transform: scale(1.15);
}

.fmt-swatch-none {
	background: #fff;
	position: relative;
	overflow: hidden;
}

.fmt-swatch-none::after {
	content: '';
	position: absolute;
	top: 50%;
	left: -2px;
	right: -2px;
	height: 2px;
	background: #FF3B30;
	transform: translateY(-50%) rotate(-45deg);
}

/* Marker List Overlay (Ctrl+G) */

#markerListOverlay {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.65);
	z-index: 3000;
	display: flex;
	align-items: center;
	justify-content: center;
}

#markerListPanel {
	background: #1c1c1c;
	border: 1px solid #3a3a3a;
	border-radius: 10px;
	min-width: 340px;
	max-width: 520px;
	max-height: 65vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(0,0,0,0.7);
}

.mlo-header {
	padding: 13px 18px;
	font-size: 0.8rem;
	font-weight: bold;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #888;
	border-bottom: 1px solid #2e2e2e;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.mlo-open-ext {
	cursor: pointer;
	color: #555;
	font-size: 1rem;
	line-height: 1;
	margin-right: 8px;
}
.mlo-open-ext:hover { color: #0a84ff; }

.mlo-close {
	cursor: pointer;
	color: #555;
	font-size: 1rem;
	line-height: 1;
}

.mlo-close:hover { color: #fff; }

.mlo-items {
	overflow-y: auto;
	padding: 6px 0;
}

.mlo-item {
	padding: 11px 18px;
	cursor: pointer;
	color: #ddd;
	font-size: 1rem;
	outline: none;
	border-left: 3px solid transparent;
}

.mlo-item:hover,
.mlo-item:focus {
	background: #1e3a5f;
	border-left-color: #4297d7;
	color: #fff;
}

.mlo-search {
	width: 100%;
	box-sizing: border-box;
	background: #111;
	border: none;
	border-bottom: 1px solid #2e2e2e;
	color: #eee;
	font-size: 0.95rem;
	padding: 10px 18px;
	outline: none;
}

.mlo-search::placeholder { color: #555; }

.mlo-search:focus { border-bottom-color: #4297d7; }

.mlo-prefix {
	color: #4297d7;
	font-size: 0.75em;
	margin-right: 8px;
	opacity: 0.7;
}

/* Edit Mode Bar */

#editModeBar {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #cc3300;
	color: #ffffff;
	text-align: center;
	font-size: 1.1rem;
	font-weight: bold;
	letter-spacing: 8px;
	padding: 7px 0;
	z-index: 2000;
	cursor: pointer;
}

#editModeBar.active {
	display: block;
	animation: blinker 1s linear infinite;
}

/* ---------- */



.ap-label-scroller span {
	padding: 1px 4px;
	font-size: .7rem;
	min-width: 50px;
	color: #888;
}

.ap-label-scroller .input {
	color: #a6adbb;
	text-align: center;
}

.ap-label-scroller {
	gap: 4px;
}

.ap-label-scroller .input-xs {
	height: 1.2rem;
	font-size: 0.7rem;
}


.ap-configurator {
	position: fixed;
	bottom: 0;
	width: 100%;
	color: var(--text-color);
	border-top: 3px groove white;
	background-color: var(--background-color);
	transition: bottom 0.7s ease;
	z-index: 5;
}

.ap-configurator.on {
	bottom: -260px;
}

.flex-row {
	flex-direction: row;
}

.flex {
	display: flex;
}

.flex-col {
	flex-direction: column;
}


.ap-controller-menu {
	left: 1000;
	background-color: var(--background-color);
	height: 95%;
	padding: 10px;
	position: relative;
	transition: left 1s ease-in;
}

.menu-on .ap-controller-menu {
	left: 0;
	transition: left 0.5s ease-out;
}

.ap-label-scroller .max-w-xs {
	max-width: 2.5rem;
}

#fileTitle {
	padding: 2px 8px;
	font-size: 0.75rem;
	color: #888;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1 1 0;
	min-width: 0;
}

#watchBadge {
	display: inline-block;
	font-size: 11px;
	color: #30d158;
	letter-spacing: 0.05em;
	padding: 2px 8px;
	border: 1px solid #30d158;
	border-radius: 10px;
	margin-left: 10px;
	animation: watchPulse 2s ease-in-out infinite;
}

@keyframes watchPulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0.45; }
}

.back {
	position: absolute;
	background-color: black;
	height: 100%;
	width: 100%;
	top: 0px;
}

.max-w-xs {
	max-width: 4.3rem !important;
}

#cntdwn-value {
	max-width: 6.4rem !important;
	color: #9ca3af;
}

#semaforo {
	position: fixed;
	top: 0px;
	width: 100%;
	height: 69px;
	z-index: 4;
	transition: background-color 0.5s;
}

.flag-none {
	background-color: #00000000;
}

.input{
	margin-left: 5px;
	height: 2rem;
}

.btn{
	margin-left: 5px;
	height: 2rem;
	min-height: 2rem;
}

/* Voice Follow — microfono attivo */
#voiceBtn {
	color: #737373;
}

#voiceBtn.active-voice {
	color: #ff3333;
	animation: blinker 1.2s ease-in-out infinite;
	text-shadow: 0 0 10px rgba(255, 51, 51, 0.7);
}

/* Indicatore modifiche non salvate */
#dirtyDot {
	display: none;
	color: #ff8800;
	font-size: 14px;
	line-height: 1;
	vertical-align: middle;
	cursor: default;
	margin-left: -4px;
	text-shadow: 0 0 6px rgba(255, 136, 0, 0.7);
}

#dirtyDot.visible {
	display: inline;
}

/* ── Viewer mode ─────────────────────────────────────────────────────────── */

/* Due badge sovrapposti — visibilità via body.viewer-ws-ok (stessa tecnica dei tasti) */
#viewerBadgeOk,
#viewerBadgeKo {
	position: fixed;
	bottom: 12px;
	right: 14px;
	font-size: 0.7rem;
	font-weight: bold;
	letter-spacing: 3px;
	padding: 4px 10px;
	border-radius: 4px;
	z-index: 9999;
	user-select: none;
	pointer-events: none;
}

#viewerBadgeOk {
	background: rgba(66, 151, 215, 0.15);
	color: #4297d7;
	border: 1px solid rgba(66, 151, 215, 0.3);
	opacity: 0;
}

#viewerBadgeKo {
	background: rgba(255, 68, 68, 0.1);
	color: #ff4444;
	border: 1px solid rgba(255, 68, 68, 0.4);
	opacity: 1;
}

body.viewer-ws-ok #viewerBadgeOk { opacity: 1; }
body.viewer-ws-ok #viewerBadgeKo { opacity: 0; }

/* ── Viewer: barre comandi sgancia/aggancia + marker nav ────────────────────
   Due barre fisse sovrapposti, visibilità controllata SOLO dal CSS tramite
   la classe .viewer-detached sul body — nessuna modifica inline da JS. */

#viewerBarAttached,
#viewerBarDetached {
	position: fixed;
	bottom: 20px;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: -webkit-fit-content;
	width: fit-content;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	gap: 8px;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.7);
	padding: 8px 18px;
	border-radius: 28px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	-webkit-user-select: none;
	user-select: none;
}

/* Stato di default (agganciato): barra sganciata invisibile */
#viewerBarDetached {
	opacity: 0;
	pointer-events: none;
}

/* Con .viewer-detached sul body: scambia le barre */
body.viewer-detached #viewerBarAttached {
	opacity: 0;
	pointer-events: none;
}
body.viewer-detached #viewerBarDetached {
	opacity: 1;
	pointer-events: auto;
}

#viewerBarAttached button,
#viewerBarDetached button {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 18px;
	padding: 8px 20px;
	font-size: 14px;
	cursor: pointer;
	white-space: nowrap;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

/* Primo pulsante della barra sganciata = "Aggancia" → evidenziato in giallo */
#viewerBarDetached button:first-child {
	color: #ffd60a;
	border-color: rgba(255, 214, 10, 0.5);
	background: rgba(255, 214, 10, 0.12);
}

/* ── Consultazione: nasconde le barre viewer standard ──────────────────── */
body.consult-mode #viewerBarAttached,
body.consult-mode #viewerBarDetached {
	display: none !important;
}

/* ── Consultazione: barra comandi ───────────────────────────────────────── */
#consultBar {
	position: fixed;
	bottom: 20px;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: -webkit-fit-content;
	width: fit-content;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	gap: 10px;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.8);
	padding: 8px 18px;
	border-radius: 28px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	-webkit-user-select: none;
	user-select: none;
}

#consultBar button {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 18px;
	padding: 8px 16px;
	font-size: 14px;
	cursor: pointer;
	white-space: nowrap;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

#consultBar button:active {
	background: rgba(255, 255, 255, 0.25);
}

#consultBar .goto-btn {
	background: rgba(10, 132, 255, 0.25);
	color: #0a84ff;
	border-color: rgba(10, 132, 255, 0.5);
}

#consultBar .font-btn {
	padding: 8px 12px;
	font-weight: bold;
}

#consultBar input[type=range] {
	width: 100px;
	-webkit-appearance: none;
	appearance: none;
	height: 4px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 2px;
	outline: none;
}

#consultBar input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
}

#consultBar .consult-sep {
	width: 1px;
	height: 24px;
	background: rgba(255, 255, 255, 0.15);
}

/* ══════════════════════════════════════════════════════════════════════════════
   Shared component classes (used in both main.html and FreePro.html)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Splash logo overlay ───────────────────────────────────────────────────── */
#ap-splash-logo {
	position: fixed; top: 0; left: 0;
	width: 100vw; height: 100vh;
	display: flex; align-items: center; justify-content: center;
	background: #000; z-index: 9998; pointer-events: none;
}
#ap-splash-logo img {
	width: 100%; height: 100%; object-fit: contain;
}

/* ── Watch badge ───────────────────────────────────────────────────────────── */
#watchBadge { display: none; }

/* ── Primary controller indicator ──────────────────────────────────────────── */
#ap-primary-badge {
	display: none; position: fixed;
	bottom: 0; left: 0; right: 0;
	height: 2px; background: #ff9f0a;
	z-index: 200000; pointer-events: none;
}

/* ── License banner ────────────────────────────────────────────────────────── */
#ap-license-banner {
	display: none; position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 200001; background: #ff9f0a; color: #000;
	text-align: center; padding: 6px 16px;
	font-size: 13px; font-weight: bold;
	font-family: Arial, sans-serif; cursor: pointer;
}

/* ── Demo badge ────────────────────────────────────────────────────────────── */
#ap-demo-banner {
	display: none; position: fixed;
	bottom: 6px; right: 10px; z-index: 200002;
	background: rgba(255,159,10,.85); color: #000;
	padding: 4px 12px; font-size: 11px; font-weight: bold;
	font-family: Arial, sans-serif; border-radius: 6px;
	pointer-events: none;
}

/* ── Setlist bar & dropdown (shared between panel and edit tab) ─────────────── */
.ap-setlist-bar {
	padding: 6px 10px; border-bottom: 1px solid #333;
	display: flex; gap: 5px; align-items: center; flex-wrap: wrap;
	background: #2a2a30; min-height: 36px; flex-shrink: 0;
}
.ap-setlist-dropdown {
	flex: 1; background: #2c2c2e; color: #fff;
	border: 1px solid #444; border-radius: 6px;
	padding: 5px 6px; font-size: 12px; min-width: 80px;
}

/* ── Play button active state ──────────────────────────────────────────────── */
.button.play-active { color: lightgreen; }

/* ── Shortcut modal note ───────────────────────────────────────────────────── */
.ap-scut-note { color: #555; font-size: .7em; }

/* ── Hidden file inputs ────────────────────────────────────────────────────── */
.file-input-hidden { display: none; }

/* ══════════════════════════════════════════════════════════════════════════════
   main.html — Admin/settings component classes
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Edit / Scaletta panel ─────────────────────────────────────────────────── */
#edit-setlist {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
	overflow-y: auto; background: #0a0a14; padding: 20px;
}
.edit-setlist-wrap { max-width: 550px; margin: 0 auto; }
.edit-setlist-header {
	display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.edit-setlist-title {
	margin: 0; color: #e0e0e0; font-size: 16px; font-weight: 600; flex: 1;
}
.edit-setlist-controls {
	display: flex; gap: 6px; align-items: center;
	margin-bottom: 14px; flex-wrap: wrap;
}
.edit-setlist-select {
	flex: 1; background: #2c2c2e; color: #fff;
	border: 1px solid #444; border-radius: 6px;
	padding: 6px 8px; font-size: 13px; min-width: 120px;
}
#edit-setlist-list { min-height: 200px; }

/* ── Admin helper & status text ────────────────────────────────────────────── */
.adm-helper-text { color: #636366; font-size: 11px; margin-left: auto; }
.adm-status-text { color: #888; font-size: 12px; }
.adm-value-highlight { color: #e0e0e0; }

/* ── Admin form inputs with fixed width ────────────────────────────────────── */
.adm-input-sm  { width: 70px; }
.adm-input-md  { width: 80px; }
.adm-input-lg  { width: 130px; }

/* ── Admin show name ───────────────────────────────────────────────────────── */
.adm-show-name {
	padding: 4px 0 2px; font-size: 13px; font-weight: 600;
	color: #e0e0e0; word-break: break-all; line-height: 1.3;
}

/* ── Admin checkbox accent ─────────────────────────────────────────────────── */
.adm-checkbox { accent-color: #0a84ff; }

/* ── Admin flexbox utilities ───────────────────────────────────────────────── */
.adm-flex        { display: flex; }
.adm-flex-wrap   { display: flex; flex-wrap: wrap; }
.adm-gap-sm      { gap: 6px; }
.adm-gap-md      { gap: 8px; }
.adm-gap-lg      { gap: 10px; }
.adm-gap-xl      { gap: 16px; }
.adm-ml-auto     { margin-left: auto; }
.adm-justify-end { justify-content: flex-end; }
.adm-justify-between { justify-content: space-between; }
.adm-items-center { align-items: center; }
.adm-pt-sm       { padding-top: 8px; }
.adm-pt-md       { padding-top: 10px; }
.adm-mb-md       { margin-bottom: 16px; }
.adm-flex-1      { flex: 1; }
.adm-cursor-ptr  { cursor: pointer; }

/* ── Admin card constraint ─────────────────────────────────────────────────── */
.adm-card-narrow { max-width: 700px; }

/* ── Admin button large ────────────────────────────────────────────────────── */
.adm-btn-lg { font-size: 14px; padding: 10px 20px; }

/* ── Scrollable table container ────────────────────────────────────────────── */
.adm-table-scroll { max-height: 300px; overflow-y: auto; }

/* ── License info grid ─────────────────────────────────────────────────────── */
.adm-lic-grid {
	display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px;
}

/* ── License grace banner ──────────────────────────────────────────────────── */
#adm-lic-grace-banner {
	display: none; margin-top: 10px; padding: 8px 12px;
	background: rgba(255,159,10,.2); border: 1px solid #ff9f0a;
	border-radius: 8px; color: #ff9f0a;
	font-size: 13px; font-weight: bold;
}

/* ── License panel iframe ──────────────────────────────────────────────────── */
#adm-lic-iframe {
	width: 100%; border: none; border-radius: 8px;
	background: #111; min-height: 600px;
}

/* ── Version footer ────────────────────────────────────────────────────────── */
.adm-version-footer {
	text-align: center; padding: 12px 0 4px;
	color: #636366; font-size: 12px;
}