/**
 * 2.10.0 — Mini console audio, aspetto «vecchio digitale».
 * Mobile di plastica scura, display a cristalli liquidi retroilluminato,
 * VU a segmenti, tasti con lo smusso. Tre colori di display: verde, ambra, blu.
 */
.itb-cons {
	--c-luce: #4dff7c;
	--c-luce-tenue: rgba(77, 255, 124, .18);
	--c-fondo-lcd: #06140a;
	--c-mobile: #1c1e21;
	--c-mobile-2: #2a2d31;
	--c-bordo: #0c0d0f;
	--c-scritta: #b8bec6;
	--c-giallo: #ffc93c;
	--c-rosso: #ff4a3d;
	box-sizing: border-box;
	max-width: 360px;
	width: 100%;
	margin: 0 auto;
	padding: 10px 10px 12px;
	background: linear-gradient(180deg, var(--c-mobile-2), var(--c-mobile));
	border: 1px solid var(--c-bordo);
	border-radius: 10px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 18px rgba(0, 0, 0, .35);
	color: var(--c-scritta);
	font-family: "DejaVu Sans Mono", "Lucida Console", "Courier New", monospace;
	font-size: 12px;
	line-height: 1.3;
	letter-spacing: .04em;
}
.itb-cons *, .itb-cons *::before, .itb-cons *::after { box-sizing: border-box; }
.itb-cons.tema-ambra { --c-luce: #ffb000; --c-luce-tenue: rgba(255, 176, 0, .18); --c-fondo-lcd: #150c02; }
.itb-cons.tema-blu { --c-luce: #5fe6ff; --c-luce-tenue: rgba(95, 230, 255, .18); --c-fondo-lcd: #041218; }

/* testa */
.itb-cons-testa { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.itb-cons-marchio { flex: 1; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #8b929b; }
.itb-cons-led { width: 9px; height: 9px; border-radius: 50%; background: #3a1210; box-shadow: inset 0 0 2px #000; }
.itb-cons-led.acceso { background: var(--c-luce); box-shadow: 0 0 8px var(--c-luce); }
.itb-cons-led.parla { background: var(--c-giallo); box-shadow: 0 0 8px var(--c-giallo); }
.itb-cons-led.errore { background: var(--c-rosso); box-shadow: 0 0 8px var(--c-rosso); }
.itb-cons-apri {
	width: 24px; height: 20px; padding: 0; border: 1px solid var(--c-bordo); border-radius: 4px;
	background: linear-gradient(180deg, #3b3f45, #26292d); color: var(--c-scritta); cursor: pointer; font: inherit; line-height: 1;
}
.itb-cons.chiusa .itb-cons-apri { transform: rotate(-90deg); }
.itb-cons.chiusa .itb-cons-corpo { display: none; }

/* display */
.itb-cons-lcd {
	position: relative;
	padding: 8px 10px;
	background: var(--c-fondo-lcd);
	border: 2px solid #000;
	border-radius: 4px;
	box-shadow: inset 0 0 14px rgba(0, 0, 0, .9);
	color: var(--c-luce);
	text-shadow: 0 0 6px var(--c-luce);
	text-transform: uppercase;
	overflow: hidden;
}
.itb-cons-lcd::after { /* righe di scansione */
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px);
}
.itb-cons-lcd-r1 { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; font-weight: 700; letter-spacing: .12em; }
.itb-cons-lcd-r2 { margin-top: 3px; min-height: 2.6em; font-size: 11px; opacity: .9; white-space: normal; word-break: break-word; }

/* corpo */
.itb-cons-corpo { margin-top: 10px; }
.itb-cons-blocco { margin: 0 0 10px; padding: 8px 8px 9px; border: 1px solid #0f1012; border-radius: 6px; background: rgba(0, 0, 0, .18); }
.itb-cons-blocco legend { padding: 0 4px; font-size: 10px; font-weight: 700; letter-spacing: .18em; color: #8b929b; }
.itb-cons-riga { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.itb-cons-riga > span { flex: 0 0 auto; min-width: 3.4em; font-size: 10px; color: #8b929b; }
.itb-cons select {
	flex: 1; min-width: 0; max-width: 100%; height: 26px; padding: 0 4px;
	background: var(--c-fondo-lcd); color: var(--c-luce); border: 1px solid #000; border-radius: 3px;
	font: inherit; font-size: 11px; text-transform: uppercase;
}
.itb-cons-num output {
	flex: 1; padding: 1px 5px; background: var(--c-fondo-lcd); border: 1px solid #000; border-radius: 3px;
	color: var(--c-luce); text-shadow: 0 0 5px var(--c-luce); text-align: right; font-weight: 700;
}

/* VU a segmenti */
.itb-cons-vu { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; height: 12px; margin: 2px 0 7px; padding: 2px; background: #000; border-radius: 2px; }
.itb-cons-vu i { display: block; background: var(--c-luce-tenue); border-radius: 1px; }
.itb-cons-vu i.on { background: var(--c-luce); box-shadow: 0 0 4px var(--c-luce); }
.itb-cons-vu i.g { background: rgba(255, 201, 60, .18); }
.itb-cons-vu i.g.on { background: var(--c-giallo); box-shadow: 0 0 4px var(--c-giallo); }
.itb-cons-vu i.r { background: rgba(255, 74, 61, .2); }
.itb-cons-vu i.r.on { background: var(--c-rosso); box-shadow: 0 0 4px var(--c-rosso); }
.itb-cons-vu i.picco { outline: 1px solid var(--c-luce); }

/* manopole (cursori) */
.itb-cons-manopole { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin: 2px 0 6px; }
.itb-cons-manopole label { display: grid; grid-template-columns: 3em 1fr 3em; align-items: center; gap: 4px; font-size: 10px; color: #8b929b; }
.itb-cons-manopole output { color: var(--c-luce); text-shadow: 0 0 5px var(--c-luce); text-align: right; font-weight: 700; }
.itb-cons input[type="range"] { width: 100%; min-width: 0; height: 18px; margin: 0; background: transparent; accent-color: var(--c-luce); -webkit-appearance: none; appearance: none; }
.itb-cons input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: #000; border-radius: 2px; box-shadow: inset 0 0 0 1px #333; }
.itb-cons input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 16px; margin-top: -6px; border-radius: 2px; background: linear-gradient(180deg, #d9dde2, #8d939a); border: 1px solid #000; }
.itb-cons input[type="range"]::-moz-range-track { height: 4px; background: #000; border-radius: 2px; }
.itb-cons input[type="range"]::-moz-range-thumb { width: 12px; height: 16px; border-radius: 2px; background: linear-gradient(180deg, #d9dde2, #8d939a); border: 1px solid #000; }

/* tasti */
.itb-cons-tasti { display: flex; flex-wrap: wrap; gap: 6px; }
.itb-cons-tasti button {
	flex: 1 1 0; min-width: 64px; min-height: 30px; padding: 4px 6px;
	border: 1px solid #000; border-radius: 4px;
	background: linear-gradient(180deg, #454a51, #2b2e33);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 2px 0 #000;
	color: #d7dce2; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .08em; cursor: pointer;
}
.itb-cons-tasti button:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6); }
.itb-cons-tasti button[aria-pressed="true"] { color: var(--c-luce); text-shadow: 0 0 6px var(--c-luce); background: linear-gradient(180deg, #202326, #16181a); box-shadow: inset 0 1px 4px rgba(0, 0, 0, .7); }
.itb-cons-tasti button:disabled { opacity: .4; cursor: default; }
.itb-cons-tasti button:focus-visible, .itb-cons select:focus-visible, .itb-cons-apri:focus-visible, .itb-cons input:focus-visible { outline: 2px solid var(--c-luce); outline-offset: 1px; }
.itb-cons-assistente { padding-top: 2px; }
.itb-cons-assistente button { min-width: 70px; }

@media (prefers-reduced-motion: reduce) {
	.itb-cons-lcd { text-shadow: none; }
}