/* ZIX LETREIRO LED V2 */
#zixLedTicker[hidden]{display:none!important;}
#zixLedTicker{
 position:relative;
 overflow:hidden;
 margin:12px 0 20px;
 padding:12px 0;
 border:3px solid transparent;
 border-radius:14px;
 background:
 linear-gradient(#041525,#041525) padding-box,
 conic-gradient(from var(--ang),
 #00fa55,#00caff,#ffdf25,#ff399d,#00fa55)
 border-box;
 box-shadow:0 0 14px #00e5ff99;
 animation:zixBorda 5s linear infinite;
}
@property --ang {
 syntax:'<angle>';
 inherits:false;
 initial-value:0deg;
}
@keyframes zixBorda{to{--ang:360deg}}
#zixLedTicker .zix-track{
 display:flex;
 width:max-content;
 min-width:100%;
 animation:zixPassar var(--tempo,20s) linear infinite;
}
#zixLedTicker .zix-frase{
 white-space:pre;
 flex-shrink:0;
 padding:0 35px;
 color:var(--cor,#ffdf37);
 font:900 clamp(15px,2.8vw,25px)/1.4 system-ui;
 text-shadow:0 0 7px currentColor,0 0 16px currentColor;
}
@keyframes zixPassar{
 from{transform:translateX(0)}
 to{transform:translateX(-50%)}
}
#zixLedTicker[data-effect="pulse"] .zix-frase{
 animation:zixPiscar 1.5s ease-in-out infinite alternate;
}
@keyframes zixPiscar{to{opacity:.55}}
#zixLedTicker[data-effect="fixed"]{
 animation:none;
 border-color:#28e882;
}
#zixLedAdmin textarea,#zixLedAdmin select{
 display:block;
 width:100%;
 padding:10px;
 margin-top:6px;
 box-sizing:border-box;
 border:1px solid #bacce5;
 border-radius:9px;
 background:white;
 color:#15345b;
 font:inherit;
}
#zixLedAdmin label{
 display:block;
 margin:12px 0;
}
#zixLedAdmin input[type="range"]{width:100%}
@media(prefers-reduced-motion:reduce){
 #zixLedTicker,
 #zixLedTicker .zix-track,
 #zixLedTicker .zix-frase{
  animation:none!important;
 }
 #zixLedTicker .zix-track{width:100%}
 #zixLedTicker .zix-frase{
  white-space:normal;
 }
 #zixLedTicker .zix-frase+ .zix-frase{
  display:none;
 }
}

/* Desktop: letreiro 36px mais largo (18px para cada lado).
   O ajuste não altera o celular e respeita a largura da janela. */
@media screen and (min-width:701px){
 #zixLedTicker{
  box-sizing:border-box;
  width:calc(100% + 36px);
  max-width:calc(100vw - 4px);
  margin-left:-18px;
  margin-right:-18px;
 }
}

#zixLedTicker[data-effect="christmas"]{
 background:
 linear-gradient(#041525,#041525) padding-box,
 conic-gradient(from var(--ang),#ff3b3b,#3bff6d,#44c8ff,#ffd63b,#ff54d9,#ff3b3b) border-box;
 box-shadow:0 0 14px #79ffb999,0 0 24px #4dc9ff55;
}
#zixLedTicker[data-effect="christmas"] .zix-frase{
 animation:zixNatalPisca 1.2s linear infinite;
 text-shadow:0 0 6px currentColor,0 0 12px currentColor,0 0 22px #fff6;
}
@keyframes zixNatalPisca{
 0%,100%{filter:brightness(1)}
 25%{filter:brightness(1.18)}
 50%{filter:brightness(.92)}
 75%{filter:brightness(1.12)}
}
#zixLedTicker[data-effect="rainbow"]{
 background:
 linear-gradient(#05162a,#05162a) padding-box,
 linear-gradient(90deg,#ff375f,#ffa500,#ffe34c,#1eff86,#35c8ff,#8767ff,#ff4fd8,#ff375f) border-box;
 box-shadow:0 0 16px #43c4ff66,0 0 22px #ff4fd855;
 animation:zixRainbowBorder 4s linear infinite;
}
#zixLedTicker[data-effect="rainbow"] .zix-track{
 animation:zixPassar var(--tempo,20s) linear infinite;
}
#zixLedTicker[data-effect="rainbow"] .zix-frase{
 background-image:linear-gradient(90deg,#ff5470 0%,#ffb703 16%,#f8ff6b 32%,#4dff88 48%,#38d9ff 64%,#8b7dff 80%,#ff65e0 100%);
 background-size:220% auto;
 -webkit-background-clip:text;
 background-clip:text;
 color:transparent;
 -webkit-text-fill-color:transparent;
 text-shadow:none;
 animation:zixRainbowText 2.6s linear infinite;
}
@keyframes zixRainbowBorder{
 0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}
}
@keyframes zixRainbowText{
 0%{background-position:0% 50%;filter:drop-shadow(0 0 6px #fff7)}
 100%{background-position:220% 50%;filter:drop-shadow(0 0 10px #fff8)}
}
#zixLedPreview[data-effect="pulse"]{animation:zixPreviewPulse 1.6s ease-in-out infinite alternate;}
#zixLedPreview[data-effect="christmas"]{background:linear-gradient(90deg,#06172c,#0c2341,#06172c);box-shadow:0 0 0 2px #e6f1ff inset,0 0 16px #57ffc266;}
#zixLedPreview[data-effect="rainbow"]{background:linear-gradient(90deg,#081a34,#0d294f,#081a34);box-shadow:0 0 0 2px #e6f1ff inset,0 0 18px #5bc2ff55; background-size:200% auto; animation:zixPreviewRainbow 3.5s linear infinite;}
@keyframes zixPreviewPulse{from{filter:brightness(1)}to{filter:brightness(1.2)}}
@keyframes zixPreviewRainbow{0%{background-position:0% 50%}100%{background-position:200% 50%}}