/* TED Emergency — design e sviluppo del tema: FB Engineering */
/*!
 * TED Emergency — stili dei display (countdown e contatori)
 */

/* ================================================================
 * Separatore a due punti (comune)
 * ================================================================ */
.ted-cd__sep {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .5em;
	align-self: stretch;
	padding-bottom: 1.6rem;
	font-size: clamp(1rem, 2.5vw, 1.6rem);
	animation: ted-blink 1s steps(1) infinite;
}
.ted-cd__sep i {
	display: block;
	width: .32em; height: .32em;
	border-radius: 50%;
	background: var(--ted-primary);
	box-shadow: 0 0 8px var(--ted-primary);
}
.ted-cd__num { display: inline-flex; align-items: center; justify-content: center; }

/* ================================================================
 * Tabelloni (aeroporto e ferroviario)
 * ================================================================ */
.ted-board {
	width: min(100%, 760px);
	margin: 0 auto 1.6rem;
	border-radius: calc(var(--ted-radius) * .6);
	overflow: hidden;
	text-align: left;
	font-family: var(--ted-font-digits);
	box-shadow: 0 30px 60px -30px #000, inset 0 0 0 1px var(--ted-line);
}
.ted-hero--left .ted-board { margin-left: 0; }
.ted-board__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .55rem 1rem;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: var(--ted-ui-transform);
}
.ted-board__title { display: inline-flex; align-items: center; gap: .6rem; }
.ted-board__title small { font-weight: 400; opacity: .7; letter-spacing: .12em; }
.ted-board__title .ted-icon { width: 1.3em; height: 1.3em; }
.ted-board__clock { font-variant-numeric: tabular-nums; }
.ted-board { --fc: clamp(.8rem, 1.6vw, 1.05rem); }
.ted-board--railway { --fc: clamp(.9rem, 2vw, 1.3rem); }
.ted-board__cols, .ted-board__row {
	display: grid;
	grid-template-columns: calc(var(--fc) * 5.6) minmax(0, 1fr) calc(var(--fc) * 5.6) calc(var(--fc) * 2.6) calc(var(--fc) * 8);
	gap: .7rem;
	align-items: center;
	padding: .5rem 1rem;
}
.ted-board__cols { font-size: .66rem; letter-spacing: .18em; text-transform: var(--ted-ui-transform); }
.ted-board__cols span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ted-board__st-end { display: none; }
.ted-cd.is-ended .ted-board__st-live { display: none; }
.ted-cd.is-ended .ted-board__st-end { display: inline; }

/* --- Aeroporto --- */
.ted-board--airport { background: #0a0a0a; }
.ted-board--airport .ted-board__head { background: var(--ted-primary); color: var(--ted-on-primary); }
.ted-board--airport .ted-board__cols { color: var(--ted-muted); border-bottom: 1px solid var(--ted-line); }
.ted-board--airport .ted-board__row { font-size: var(--fc); color: var(--ted-flap-text); }
.ted-board--airport .ted-board__status {
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: var(--ted-ui-transform);
	color: var(--ted-primary);
	animation: ted-blink-soft 1.6s ease-in-out infinite;
}
.ted-flaptext { display: flex; gap: 2px; overflow: hidden; white-space: nowrap; }
.ted-flaptext .ted-flap { width: .9em; margin: 0; font-size: 1em; flex: none; }

/* --- Ferroviario --- */
.ted-board--railway { background: #040404; }
.ted-board--railway .ted-board__head { background: #0d0d0d; border-bottom: 1px solid #1d1d1d; }
.ted-board--railway .ted-board__cols { color: #6d6d6d; background: #090909; }
.ted-board--railway .ted-board__cols, .ted-board--railway .ted-board__row { grid-template-columns: calc(var(--fc) * 4.4) minmax(0, 1fr) calc(var(--fc) * 3.6) calc(var(--fc) * 2.6) calc(var(--fc) * 2.4); }
.ted-board--railway .ted-board__row { font-size: var(--fc); font-weight: 700; letter-spacing: .06em; text-transform: var(--ted-ui-transform); }
.ted-board__dest { overflow: hidden; white-space: nowrap; }
.ted-board__scroll { display: inline-block; }
.ted-board__dest.is-long .ted-board__scroll, .ted-board__scroll--always {
	padding-left: 100%;
	animation: ted-board-scroll 14s linear infinite;
}
.ted-board__note {
	overflow: hidden;
	white-space: nowrap;
	padding: .5rem 1rem;
	border-top: 1px dashed #222;
	font-size: .92rem;
	letter-spacing: .08em;
	text-transform: var(--ted-ui-transform);
}
.ted-board__note .ted-board__scroll--always { animation-duration: 22s; }
.ted-board__plat {
	justify-self: start;
	min-width: 2.2em;
	text-align: center;
	padding: .05em .35em;
	border: 1px solid var(--ted-led);
	border-radius: 4px;
}

/* Scritte a LED: i caratteri vengono "bucati" in puntini con una maschera */
.ted-led {
	color: var(--ted-led);
	text-shadow: 0 0 6px color-mix(in srgb, var(--ted-led) 70%, transparent);
	-webkit-mask-image: radial-gradient(circle, #000 55%, transparent 62%);
	mask-image: radial-gradient(circle, #000 55%, transparent 62%);
	-webkit-mask-size: 3px 3px;
	mask-size: 3px 3px;
}
.ted-led .ted-icon { stroke-width: 2.4; }

/* ================================================================
 * Palette (split-flap)
 * ================================================================ */
.ted-flap {
	--fh: 1.36em;
	position: relative;
	display: inline-block;
	width: .82em;
	height: var(--fh);
	margin: 0 .04em;
	perspective: 380px;
	font-family: var(--ted-font-digits);
	font-weight: 700;
	line-height: var(--fh);
	text-align: center;
	color: var(--ted-flap-text);
	border-radius: .1em;
	box-shadow: 0 .12em .25em rgba(0, 0, 0, .7);
	vertical-align: middle;
}
.ted-flap__half, .ted-flap__leaf {
	position: absolute;
	left: 0; right: 0;
	height: 50%;
	overflow: hidden;
	background: var(--ted-flap-bg);
}
.ted-flap__top, .ted-flap__leaf--top {
	top: 0;
	border-radius: .1em .1em 0 0;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .01));
}
.ted-flap__bottom, .ted-flap__leaf--bottom {
	bottom: 0;
	border-radius: 0 0 .1em .1em;
	background-image: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, 0));
}
.ted-flap b {
	position: absolute;
	left: 0; right: 0;
	height: var(--fh);
	font-weight: inherit;
}
.ted-flap__top b, .ted-flap__leaf--top b { top: 0; }
.ted-flap__bottom b, .ted-flap__leaf--bottom b { bottom: 0; }
.ted-flap__leaf { z-index: 2; visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.ted-flap__leaf--top { transform-origin: 50% 100%; }
.ted-flap__leaf--bottom { transform-origin: 50% 0; transform: rotateX(90deg); }
.ted-flap.is-flipping .ted-flap__leaf { visibility: visible; }
.ted-flap.is-flipping .ted-flap__leaf--top { animation: ted-flap-top var(--flap-speed, 120ms) ease-in forwards; }
.ted-flap.is-flipping .ted-flap__leaf--bottom { animation: ted-flap-bottom var(--flap-speed, 120ms) ease-out var(--flap-speed, 120ms) forwards; }
.ted-flap::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 50%;
	height: 2px;
	margin-top: -1px;
	background: rgba(0, 0, 0, .9);
	z-index: 3;
}
.ted-flap::before {
	content: "";
	position: absolute;
	left: -.05em; right: -.05em; top: 50%;
	height: .14em;
	margin-top: -.07em;
	background: linear-gradient(90deg, #555 0 .05em, transparent .05em calc(100% - .05em), #555 calc(100% - .05em));
	z-index: 4;
}

/* Countdown stile aeroporto */
.ted-cd--airport .ted-cd__value { font-size: clamp(2.3rem, 7vw, 4.6rem); min-width: 0; }
.ted-cd--airport .ted-cd__units {
	display: inline-flex;
	padding: .9rem 1rem .6rem;
	background: #0a0a0a;
	border-radius: calc(var(--ted-radius) * .6);
	box-shadow: inset 0 0 0 1px var(--ted-line), 0 30px 60px -30px #000;
}
.ted-cd--airport .ted-cd__label { color: var(--ted-flap-text); opacity: .7; }

/* ================================================================
 * Nixie
 * ================================================================ */
.ted-nixie {
	position: relative;
	display: inline-block;
	width: .82em;
	height: 1.55em;
	margin: 0 .07em;
	border-radius: .42em .42em .14em .14em;
	background: radial-gradient(ellipse at 50% 45%, #1d130b 0%, #0a0704 70%);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, .09),
		inset .08em 0 .12em rgba(255, 255, 255, .05),
		inset 0 -.25em .35em rgba(0, 0, 0, .8),
		0 .25em .5em rgba(0, 0, 0, .7);
	overflow: hidden;
	font-family: var(--ted-font-digits);
	font-weight: 300;
	vertical-align: middle;
}
.ted-nixie i {
	position: absolute;
	inset: .12em 0 .22em;
	display: grid;
	place-items: center;
	font-style: normal;
	font-size: 1.05em;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: .02em rgba(255, 150, 80, .13);
	transform: scale(calc(1 - var(--z) * .012));
	transition: color .1s, text-shadow .1s;
}
.ted-nixie i.on {
	z-index: 1;
	color: #ffe0c2;
	-webkit-text-stroke: .015em #ffb27a;
	transform: none;
	text-shadow:
		0 0 .04em #fff,
		0 0 .1em var(--ted-nixie),
		0 0 .22em var(--ted-nixie),
		0 0 .5em var(--ted-nixie),
		0 0 .9em color-mix(in srgb, var(--ted-nixie) 60%, transparent);
}
.ted-nixie.is-flick i.on { animation: ted-nixie-flick .22s steps(3); }
.ted-nixie__mesh {
	position: absolute;
	inset: 0;
	z-index: 2;
	background-image:
		radial-gradient(circle, transparent 0 1.3px, rgba(120, 90, 60, .35) 1.5px 1.8px, transparent 2px);
	background-size: 5px 5px;
	opacity: .55;
	pointer-events: none;
}
.ted-nixie__anode {
	position: absolute;
	left: 10%; right: 10%; top: .1em; bottom: .25em;
	border: 1px solid rgba(160, 130, 100, .12);
	border-radius: .3em;
	z-index: 0;
}
.ted-nixie__glass {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background:
		linear-gradient(100deg, transparent 18%, rgba(255, 255, 255, .13) 26%, transparent 36%),
		radial-gradient(ellipse at 50% 0, rgba(255, 255, 255, .16), transparent 45%);
}
.ted-nixie::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: .16em;
	z-index: 4;
	background: linear-gradient(#4a4a4a, #111);
}

.ted-cd--nixie .ted-cd__value { font-size: clamp(2.3rem, 7vw, 4.8rem); min-width: 0; }
.ted-cd--nixie .ted-cd__units {
	display: inline-flex;
	padding: 1rem 1.2rem .7rem;
	border-radius: calc(var(--ted-radius) * .7);
	background: linear-gradient(180deg, #161310, #0a0908);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -4px 0 color-mix(in srgb, var(--ted-nixie) 25%, #000), 0 30px 60px -30px #000;
}
.ted-cd--nixie .ted-cd__sep i {
	background: #ffd0a8;
	box-shadow: 0 0 4px #fff, 0 0 10px var(--ted-nixie), 0 0 20px var(--ted-nixie);
}
.ted-cd--nixie .ted-cd__label { color: color-mix(in srgb, var(--ted-nixie) 70%, #fff); }

/* ================================================================
 * Matrice LED
 * ================================================================ */
.ted-mx {
	--mx-dot: 6px;
	--mx-gap: 2px;
	display: inline-grid;
	grid-template-columns: repeat(5, var(--mx-dot));
	grid-auto-rows: var(--mx-dot);
	gap: var(--mx-gap);
	margin: 0 calc(var(--mx-dot) * .7);
	vertical-align: middle;
}
.ted-mx i {
	border-radius: 50%;
	background: color-mix(in srgb, var(--ted-led) 9%, #0a0a0a);
	transition: background .12s, box-shadow .12s;
}
.ted-mx i.on { background: var(--ted-led); box-shadow: 0 0 calc(var(--mx-dot) * .9) var(--ted-led); }

.ted-cd--railway .ted-cd__value { min-width: 0; }
.ted-cd--railway .ted-mx { --mx-dot: clamp(4px, 1.05vw, 9px); --mx-gap: clamp(1px, .3vw, 3px); }
.ted-cd--railway .ted-cd__units {
	display: inline-flex;
	padding: 1.1rem 1.2rem .7rem;
	background: #040404;
	border-radius: calc(var(--ted-radius) * .6);
	box-shadow: inset 0 0 0 1px #1d1d1d, inset 0 0 40px rgba(0, 0, 0, .9), 0 30px 60px -30px #000;
}
.ted-cd--railway .ted-cd__sep i { background: var(--ted-led); box-shadow: 0 0 8px var(--ted-led); border-radius: 50%; }
.ted-cd--railway .ted-cd__label { color: var(--ted-led); opacity: .75; }
.ted-cd--railway .ted-cd__title { color: var(--ted-led); }

/* ================================================================
 * Sezione countdown a tutta larghezza
 * ================================================================ */
.ted-cdsection { text-align: center; overflow: hidden; isolation: isolate; }
.ted-cdsection .ted-heading { margin-inline: auto; }
.ted-cdsection .ted-line { margin-inline: auto; transform-origin: center; }
.ted-cdsection__bg {
	position: absolute;
	inset: -15% 0;
	z-index: -2;
	background-size: cover;
	background-position: center;
	opacity: .25;
}
.ted-cdsection::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--ted-primary) 16%, transparent), transparent 60%);
}
.ted-cdsection .ted-cd--railway .ted-mx { --mx-dot: clamp(5px, 1.3vw, 11px); }
.ted-cdsection .ted-cd--airport .ted-cd__value, .ted-cdsection .ted-cd--nixie .ted-cd__value { font-size: clamp(2.6rem, 8vw, 5.6rem); }
.ted-sc { margin: 2rem 0; text-align: center; }

/* ================================================================
 * Contatori — base
 * ================================================================ */
.ted-stats__grid { grid-template-columns: repeat(var(--ted-stats-cols), minmax(0, 1fr)); row-gap: 3rem; }
.ted-sc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2.5rem 1rem; margin: 2rem 0; }
.ted-stat { display: flex; justify-content: center; }

.ted-counter { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; width: 100%; }
.ted-counter__display { display: flex; justify-content: center; align-items: center; min-height: 3rem; }
.ted-counter__label {
	margin: 0;
	max-width: 24ch;
	font-family: var(--ted-font-heading);
	font-size: .92rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: var(--ted-ui-transform);
	color: var(--ted-muted);
}
.ted-counter__value {
	display: inline-flex;
	align-items: baseline;
	font-family: var(--ted-font-heading);
	font-weight: var(--ted-h-weight);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--ted-text);
}
.ted-counter__suffix, .ted-counter__prefix { color: var(--ted-primary); font-size: .5em; margin: 0 .06em; }

/* Numero grande */
.ted-counter--classic .ted-counter__value {
	font-size: calc(clamp(3.6rem, 8vw, 7rem) * var(--ted-h-scale));
	background: linear-gradient(180deg, var(--ted-text) 20%, var(--ted-primary) 130%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.ted-counter--classic .ted-counter__suffix { -webkit-text-fill-color: var(--ted-primary); }

/* SVG: sfumatura comune */
.ted-stop-a { stop-color: var(--ted-primary-2); }
.ted-stop-b { stop-color: var(--ted-primary); }

/* ---------- Anello ---------- */
.ted-ringc { position: relative; width: clamp(160px, 17vw, 210px); aspect-ratio: 1; }
.ted-ringc__svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ted-ringc__ticks { fill: none; stroke: var(--ted-line); stroke-width: 3; stroke-dasharray: 1.5 5.4; transform-origin: 70px 70px; animation: ted-spin 40s linear infinite; }
.ted-ringc__track { fill: none; stroke: color-mix(in srgb, var(--ted-primary) 12%, transparent); stroke-width: 10; }
.ted-ringc__fg { fill: none; stroke-width: 10; stroke-linecap: round; }
.ted-ringc__inner { fill: var(--ted-surface); stroke: var(--ted-line); stroke-width: 1; }
.ted-ringc__head { fill: #fff; filter: drop-shadow(0 0 6px var(--ted-primary)); transition: opacity .3s; }
.ted-ringc .ted-counter__value { position: absolute; inset: 0; justify-content: center; align-items: center; font-size: clamp(2.2rem, 4vw, 3.2rem); }
.ted-counter--ring.is-done .ted-ringc { animation: ted-ring-done .8s var(--ted-anim-ease); }

/* ---------- Contagiri ---------- */
.ted-gauge { position: relative; width: clamp(230px, 24vw, 290px); }
.ted-gauge__svg { display: block; width: 100%; height: auto; overflow: visible; }
.ted-gauge__track { fill: none; stroke: var(--ted-surface); stroke-width: 14; stroke-linecap: round; }
.ted-gauge__red { fill: none; stroke: color-mix(in srgb, var(--ted-primary) 35%, transparent); stroke-width: 14; }
.ted-gauge__arc { fill: none; stroke-width: 6; stroke-linecap: round; }
.ted-gauge__minor { stroke: color-mix(in srgb, var(--ted-text) 30%, transparent); stroke-width: 1.2; }
.ted-gauge__minor.is-red { stroke: var(--ted-primary); }
.ted-gauge__major { stroke: var(--ted-text); stroke-width: 2.4; }
.ted-gauge__lab { fill: var(--ted-muted); font-family: var(--ted-font-digits); font-size: 11px; font-weight: 600; text-anchor: middle; }
.ted-gauge__needle path { fill: var(--ted-primary); filter: drop-shadow(0 0 4px var(--ted-primary)); }
.ted-gauge__hub { fill: var(--ted-surface); stroke: var(--ted-primary); stroke-width: 2; }
.ted-gauge__pin { fill: var(--ted-text); }
.ted-gauge__read {
	position: absolute;
	left: 50%; bottom: 2%;
	transform: translateX(-50%);
	padding: .15em .6em;
	border-radius: 6px;
	background: #050505;
	box-shadow: inset 0 0 0 1px var(--ted-line);
}
.ted-gauge .ted-counter__value { font-family: var(--ted-font-digits); font-weight: 700; font-size: 1.7rem; color: var(--ted-primary); text-shadow: 0 0 10px var(--ted-glow); }
.ted-gauge.is-red .ted-gauge__read { box-shadow: inset 0 0 0 1px var(--ted-primary), 0 0 18px var(--ted-glow); }

/* ---------- Contachilometri ---------- */
.ted-odo-wrap {
	display: inline-flex;
	align-items: center;
	padding: .14em .18em;
	border-radius: .16em;
	background: linear-gradient(#141414, #050505);
	box-shadow: inset 0 0 0 2px #2d2d2d, inset 0 0 0 4px #0b0b0b, 0 14px 30px -12px #000;
	font-family: var(--ted-font-digits);
	font-size: clamp(2.6rem, 5.5vw, 4.2rem);
	font-weight: 700;
}
.ted-odo {
	position: relative;
	display: inline-block;
	width: .72em;
	height: 1.15em;
	margin: 0 .03em;
	overflow: hidden;
	border-radius: .05em;
	background: linear-gradient(180deg, #050505, #2a2a2a 50%, #050505);
	color: var(--ted-text);
	text-align: center;
}
.ted-odo--last { background: linear-gradient(180deg, color-mix(in srgb, var(--ted-primary) 55%, #000), var(--ted-primary) 50%, color-mix(in srgb, var(--ted-primary) 55%, #000)); color: var(--ted-on-primary); }
.ted-odo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .75), transparent 28%, transparent 72%, rgba(0, 0, 0, .75));
	pointer-events: none;
}
.ted-odo__strip { display: block; will-change: transform; }
.ted-odo__strip span { display: block; height: 1.15em; line-height: 1.15em; }
.ted-odo-fix { padding: 0 .15em; font-size: .45em; color: var(--ted-primary); }

/* ---------- Serbatoio ---------- */
.ted-liquid {
	--lvl: 0;
	position: relative;
	width: clamp(160px, 17vw, 200px);
	aspect-ratio: 1;
	padding: 7px;
	border-radius: 50%;
	border: 3px solid var(--ted-primary);
	box-shadow: 0 0 30px -6px var(--ted-glow), inset 0 0 0 1px var(--ted-line);
}
.ted-liquid__inner { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--ted-surface); }
.ted-liquid__water {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: calc(var(--lvl) * 100%);
	background: linear-gradient(180deg, var(--ted-primary), color-mix(in srgb, var(--ted-primary) 55%, #000));
}
.ted-liquid__wave { position: absolute; left: 0; bottom: calc(100% - 1px); width: 200%; height: 16px; animation: ted-wave 2.6s linear infinite; }
.ted-liquid__wave svg { display: block; width: 100%; height: 100%; }
.ted-liquid__wave path { fill: var(--ted-primary); }
.ted-liquid__wave--back { bottom: calc(100% + 2px); animation-duration: 4.2s; animation-direction: reverse; opacity: .5; }
.ted-liquid__wave--back path { fill: var(--ted-primary-2); }
.ted-liquid__bubble {
	position: absolute;
	bottom: 0;
	width: 6px; height: 6px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .6);
	animation: ted-bubble 3.2s ease-in infinite;
}
.ted-liquid__bubble:nth-child(3) { left: 22%; animation-delay: .4s; }
.ted-liquid__bubble:nth-child(4) { left: 48%; width: 4px; height: 4px; animation-delay: 1.3s; }
.ted-liquid__bubble:nth-child(5) { left: 66%; animation-delay: 2.1s; }
.ted-liquid__bubble:nth-child(6) { left: 80%; width: 5px; height: 5px; animation-delay: .9s; }
.ted-liquid .ted-counter__value {
	position: absolute;
	inset: 0;
	z-index: 2;
	justify-content: center;
	align-items: center;
	font-size: clamp(2.2rem, 4vw, 3rem);
	color: #fff;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .8);
}
.ted-liquid .ted-counter__suffix, .ted-liquid .ted-counter__prefix { color: #fff; }

/* ---------- VU-meter ---------- */
.ted-vu { display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.ted-vu__bars {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 120px;
	padding: 12px 14px;
	border-radius: 10px;
	background: #050505;
	box-shadow: inset 0 0 0 1px var(--ted-line), inset 0 0 30px rgba(0, 0, 0, .9);
}
.ted-vu__bars i {
	width: clamp(5px, .6vw, 8px);
	height: calc(18% + var(--h) * 82%);
	border-radius: 2px;
	background: color-mix(in srgb, var(--ted-primary) 12%, #0a0a0a);
	transition: background .07s, box-shadow .07s;
}
.ted-vu__bars i.on { background: var(--ted-primary-2); box-shadow: 0 0 6px color-mix(in srgb, var(--ted-primary-2) 60%, transparent); }
.ted-vu__bars i.mid.on { background: var(--ted-primary); box-shadow: 0 0 8px var(--ted-glow); }
.ted-vu__bars i.hot.on { background: #fff1de; box-shadow: 0 0 10px var(--ted-primary); }
.ted-vu__bars i.peak { background: var(--ted-text); }
.ted-vu .ted-counter__value { font-family: var(--ted-font-digits); font-weight: 700; font-size: clamp(2rem, 3.6vw, 2.8rem); }

/* ---------- Monitor multiparametrico ---------- */
.ted-monitor {
	width: clamp(250px, 26vw, 310px);
	padding: 10px 10px 8px;
	border-radius: 16px;
	background: linear-gradient(180deg, #2c2c2c, #151515);
	box-shadow: 0 24px 40px -20px #000, inset 0 1px 0 rgba(255, 255, 255, .1);
}
.ted-monitor__screen {
	position: relative;
	height: 156px;
	border-radius: 8px;
	overflow: hidden;
	background-color: #020202;
	background-image:
		linear-gradient(color-mix(in srgb, var(--ted-primary) 8%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--ted-primary) 8%, transparent) 1px, transparent 1px);
	background-size: 16px 16px;
	box-shadow: inset 0 0 25px rgba(0, 0, 0, .9);
	text-align: left;
}
.ted-monitor__tag { position: absolute; left: 10px; top: 7px; font-family: var(--ted-font-digits); font-size: .72rem; font-weight: 700; letter-spacing: .18em; color: var(--ted-primary); }
.ted-monitor__heart { position: absolute; right: 10px; top: 6px; width: 18px; height: 18px; color: var(--ted-primary); animation: ted-heart 1s ease-in-out infinite; }
.ted-monitor__heart svg { width: 100%; height: 100%; fill: currentColor; filter: drop-shadow(0 0 4px var(--ted-primary)); }
.ted-monitor__trace { position: absolute; left: 0; width: 64%; top: 26px; height: 88px; }
.ted-monitor__trace path { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ted-monitor__base { stroke: color-mix(in srgb, var(--ted-primary) 18%, transparent); }
.ted-monitor__line {
	stroke: var(--ted-primary);
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	filter: drop-shadow(0 0 4px var(--ted-primary));
	animation: ted-monitor-draw 2.4s linear infinite;
}
.ted-monitor__scan {
	position: absolute;
	top: 20px; bottom: 30px;
	left: 0;
	width: 16px;
	background: linear-gradient(90deg, transparent, #020202 60%);
	animation: ted-monitor-scan 2.4s linear infinite;
}
.ted-monitor__read { position: absolute; right: 12px; bottom: 26px; }
.ted-monitor .ted-counter__value {
	font-family: var(--ted-font-digits);
	font-weight: 700;
	font-size: 3rem;
	color: var(--ted-primary);
	text-shadow: 0 0 12px var(--ted-glow);
}
.ted-monitor__bar { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 5px; border-radius: 3px; background: #151515; overflow: hidden; }
.ted-monitor__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ted-primary-2), var(--ted-primary)); transform: scaleX(0); transform-origin: left; }
.ted-monitor__leds { display: flex; align-items: center; gap: 6px; padding: 8px 4px 0; }
.ted-monitor__leds i { width: 7px; height: 7px; border-radius: 50%; background: #3a3a3a; }
.ted-monitor__leds i:first-child { background: #3ddc84; box-shadow: 0 0 6px #3ddc84; }
.ted-monitor__leds i:nth-child(2) { background: var(--ted-primary); box-shadow: 0 0 6px var(--ted-primary); animation: ted-blink 1.2s steps(1) infinite; }
.ted-monitor__leds span { flex: 1; height: 6px; margin-left: 8px; border-radius: 3px; background: repeating-linear-gradient(90deg, #2c2c2c 0 3px, #1a1a1a 3px 6px); }

/* ---------- Termometro ---------- */
.ted-thermo { --lvl: 0; display: flex; align-items: flex-end; gap: 1.2rem; }
.ted-thermo__glass { position: relative; width: 70px; height: 190px; }
.ted-thermo__tube {
	position: absolute;
	left: 8px; top: 0; bottom: 26px;
	width: 22px;
	border-radius: 11px 11px 0 0;
	background: var(--ted-surface);
	box-shadow: inset 0 0 0 2px var(--ted-line);
	overflow: hidden;
}
.ted-thermo__fill {
	position: absolute;
	left: 5px; right: 5px; bottom: 0;
	height: calc(var(--lvl) * 100%);
	border-radius: 6px 6px 0 0;
	background: linear-gradient(180deg, var(--ted-primary-2), var(--ted-primary));
	box-shadow: 0 0 10px var(--ted-glow);
}
.ted-thermo__fill::after { content: ""; position: absolute; left: 2px; top: 4px; bottom: 0; width: 3px; border-radius: 2px; background: rgba(255, 255, 255, .45); }
.ted-thermo__bulb {
	position: absolute;
	left: 0; bottom: 0;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, var(--ted-primary-2), var(--ted-primary) 60%);
	box-shadow: 0 0 22px var(--ted-glow), 0 0 0 4px var(--ted-surface), 0 0 0 6px var(--ted-line);
}
.ted-thermo__scale {
	position: absolute;
	left: 38px; top: -6px; bottom: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-family: var(--ted-font-digits);
	font-size: 10px;
	color: var(--ted-muted);
	text-align: left;
	white-space: nowrap;
}
.ted-thermo__scale span::before { content: ""; display: inline-block; width: 8px; height: 1px; margin-right: 4px; vertical-align: middle; background: var(--ted-muted); }
.ted-thermo .ted-counter__value { font-size: clamp(2.8rem, 5vw, 4rem); padding-bottom: .3rem; }

/* ---------- Batteria ---------- */
.ted-battery { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.ted-battery__shell { position: relative; display: flex; align-items: center; }
.ted-battery__body {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 5px;
	width: clamp(170px, 18vw, 210px);
	height: 82px;
	padding: 7px;
	border: 3px solid var(--ted-text);
	border-radius: 12px;
}
.ted-battery__body i { --f: 0; position: relative; overflow: hidden; border-radius: 4px; background: color-mix(in srgb, var(--ted-primary) 10%, transparent); }
.ted-battery__body i::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--ted-primary-2), var(--ted-primary));
	transform: scaleX(var(--f));
	transform-origin: left;
	box-shadow: 0 0 10px var(--ted-glow);
}
.ted-battery__cap { width: 9px; height: 30px; margin-left: 3px; border-radius: 0 5px 5px 0; background: var(--ted-text); }
.ted-battery__bolt {
	position: absolute;
	left: calc(50% - 6px); top: 50%;
	width: 34px; height: 34px;
	transform: translate(-50%, -50%);
	color: #fff;
	filter: drop-shadow(0 0 6px #000);
	animation: ted-blink-soft 1s ease-in-out infinite;
	transition: opacity .6s;
}
.ted-battery__bolt svg { width: 100%; height: 100%; fill: currentColor; }
.ted-counter.is-done .ted-battery__bolt { opacity: 0; }
.ted-battery .ted-counter__value { font-family: var(--ted-font-digits); font-weight: 700; font-size: clamp(2rem, 3.6vw, 2.8rem); }

/* ---------- Matrice LED ---------- */
.ted-mxbox {
	display: inline-flex;
	align-items: flex-end;
	gap: .5rem;
	padding: 16px 14px;
	border-radius: 10px;
	background: #040404;
	box-shadow: inset 0 0 0 1px #1d1d1d, inset 0 0 30px rgba(0, 0, 0, .9);
}
.ted-mxbox .ted-mx { --mx-dot: clamp(5px, .75vw, 8px); --mx-gap: 2px; }
.ted-mxbox__suf { font-family: var(--ted-font-digits); font-weight: 700; font-size: 1.1rem; color: var(--ted-led); text-shadow: 0 0 8px var(--ted-led); }

/* ---------- Palette (contatore) ---------- */
.ted-flapbox {
	display: inline-flex;
	align-items: center;
	gap: .1em;
	padding: .18em .2em;
	border-radius: .14em;
	background: #0a0a0a;
	box-shadow: inset 0 0 0 1px var(--ted-line), 0 20px 40px -20px #000;
	font-size: clamp(2.6rem, 5vw, 3.8rem);
}
.ted-flapbox__suf { padding: 0 .15em; font-family: var(--ted-font-digits); font-size: .45em; font-weight: 700; color: var(--ted-primary); }

/* ---------- Nixie (contatore) ---------- */
.ted-nixiebox {
	display: inline-flex;
	align-items: flex-end;
	gap: .1em;
	padding: .2em .25em .18em;
	border-radius: .14em;
	background: linear-gradient(180deg, #161310, #0a0908);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -3px 0 color-mix(in srgb, var(--ted-nixie) 25%, #000), 0 20px 40px -20px #000;
	font-size: clamp(2.6rem, 5vw, 3.8rem);
}
.ted-nixiebox__suf {
	padding: 0 .1em .3em;
	font-family: var(--ted-font-digits);
	font-size: .4em;
	color: #ffe0c2;
	text-shadow: 0 0 6px var(--ted-nixie), 0 0 14px var(--ted-nixie);
}

.ted-dg-sep { display: inline-block; padding: 0 .05em; opacity: .8; }

/* ================================================================
 * Keyframes
 * ================================================================ */
@keyframes ted-flap-top { from { transform: rotateX(0); } to { transform: rotateX(-90deg); } }
@keyframes ted-flap-bottom { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }
@keyframes ted-nixie-flick { 0% { opacity: .3; } 50% { opacity: 1; } 75% { opacity: .6; } 100% { opacity: 1; } }
@keyframes ted-board-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes ted-bubble { 0% { transform: translateY(0) scale(.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-160px) scale(1.1); opacity: 0; } }
@keyframes ted-monitor-draw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes ted-monitor-scan { from { transform: translateX(0); } to { transform: translateX(calc(min(310px, 26vw) * .64)); } }
@keyframes ted-heart { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.3); } 30% { transform: scale(.95); } 45% { transform: scale(1.15); } }
@keyframes ted-ring-done { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }

/* ================================================================
 * Responsive
 * ================================================================ */
@media (max-width: 1080px) {
	.ted-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	.ted-board__opt { display: none; }
	.ted-board { --fc: .74rem; }
	.ted-board--railway { --fc: .9rem; }
	.ted-board__cols, .ted-board__row { grid-template-columns: calc(var(--fc) * 5.6) minmax(0, 1fr) calc(var(--fc) * 5.6) calc(var(--fc) * 7); gap: .45rem; padding-inline: .7rem; }
	.ted-board--railway .ted-board__cols, .ted-board--railway .ted-board__row { grid-template-columns: calc(var(--fc) * 4.4) minmax(0, 1fr) calc(var(--fc) * 3.6) calc(var(--fc) * 2.4); }
	.ted-board--airport .ted-board__status { font-size: .8em; }
	.ted-board__head small { display: none; }
	.ted-cd--airport .ted-cd__units, .ted-cd--nixie .ted-cd__units, .ted-cd--railway .ted-cd__units { padding: .7rem .6rem .5rem; }
	.ted-cd--railway .ted-mx { --mx-dot: 3.5px; --mx-gap: 1px; }
	.ted-cd--airport .ted-cd__value, .ted-cd--nixie .ted-cd__value { font-size: 1.9rem; }
}
@media (max-width: 600px) {
	.ted-stats__grid { grid-template-columns: 1fr; }
	.ted-cd--airport .ted-cd__sep, .ted-cd--nixie .ted-cd__sep, .ted-cd--railway .ted-cd__sep { display: flex; padding-bottom: 1.3rem; font-size: .7rem; }
}
@media (max-width: 440px) {
	.ted-board { --fc: .68rem; }
	.ted-board--airport .ted-board__cols > :last-child, .ted-board--airport .ted-board__status { display: none; }
	.ted-board--airport .ted-board__cols, .ted-board--airport .ted-board__row { grid-template-columns: calc(var(--fc) * 5.6) minmax(0, 1fr) calc(var(--fc) * 5.6); }
	.ted-board__cols { letter-spacing: .1em; }
}
@media (max-width: 380px) {
	.ted-cd--railway .ted-mx { --mx-dot: 3px; }
	.ted-cd--airport .ted-cd__value, .ted-cd--nixie .ted-cd__value { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
	.ted-board__scroll, .ted-board__scroll--always { animation: none !important; padding-left: 0 !important; }
	.ted-monitor__line { stroke-dashoffset: 0 !important; }
}