/* <he-rotator>: o link inteligente da aba "Teste A/B" (seção .act), no desenho da tela "Editar distribuição"
   do app. Moldura .act-scr; dentro: o link para os anúncios à esquerda, fitas até as páginas e, à direita,
   o modo de distribuição, a explicação do modo, as páginas e "Adicionar página". */
.act-vis > he-rotator { height: 100%; }
.rt { position: relative; }

.rt-bd { flex: 1; min-height: 0; padding: 18px 20px 20px; display: flex; flex-direction: column; transition: opacity 0.5s ease; }
.rt.is-fade .rt-bd { opacity: 0; }

/* fluxo: link → fitas → páginas */
.rt-flow { flex: 1; min-height: 0; position: relative; display: grid; grid-template-columns: 228px minmax(0, 1fr); column-gap: 80px; align-items: center; }
.rt-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.rt-rib { transition: opacity 0.4s; }
.rt-line { fill: none; stroke-width: 1.4; stroke-dasharray: 1.5 7; animation: rtDash 0.9s linear infinite; transition: opacity 0.4s; }
@keyframes rtDash { to { stroke-dashoffset: -8.5; } }

/* cartão do link */
.rt-src { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 16px; border: 1px solid rgba(150, 180, 225, 0.16); background: radial-gradient(220px 140px at 0% 0%, rgba(23, 150, 212, 0.16), transparent 70%), #0B1A30; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); }
.rt-src small { font: 500 12px 'Plus Jakarta Sans', sans-serif; color: #A3B1C8; }
.rt-src-n { font: 700 36px/1.05 'Funnel Display', sans-serif; color: #F5F6FA; letter-spacing: -0.01em; }
.rt-src-c { font: 500 12px 'Plus Jakarta Sans', sans-serif; color: #A3B1C8; }
.rt-src-l { margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(150, 180, 225, 0.12); font: 500 10.5px/1.55 'JetBrains Mono', monospace; color: #A3B1C8; overflow-wrap: anywhere; }
.rt-src-l b { color: #F5F6FA; font-weight: 600; }
.rt-copy { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 2px; padding: 7px 12px; border-radius: 999px; background: rgba(150, 180, 225, 0.12); font: 600 12px 'Plus Jakarta Sans', sans-serif; color: #F5F6FA; }
.rt-copy svg { width: 11px; height: 11px; fill: currentColor; }
.rt-src-p { font: 400 11px/1.45 'Plus Jakarta Sans', sans-serif; color: #8090AC; }

/* coluna das páginas */
.rt-right { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.rt-seg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 999px; background: #0B1A30; border: 1px solid rgba(150, 180, 225, 0.14); }
.rt-seg span { position: relative; z-index: 1; padding: 8px 0; text-align: center; font: 600 12.5px 'Plus Jakarta Sans', sans-serif; color: #8090AC; transition: color 0.3s; white-space: nowrap; }
.rt-seg span.is-on { color: #FFE08A; }
.rt-seg-ind { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 999px; background: rgba(255, 195, 15, 0.14); border: 1px solid rgba(255, 195, 15, 0.5); box-shadow: 0 0 18px rgba(255, 195, 15, 0.2); transform: translateX(calc(100% * var(--m, 0))); transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.rt-seg.is-flash .rt-seg-ind { animation: rtSegFlash 0.9s ease; }
@keyframes rtSegFlash { 30% { box-shadow: 0 0 0 4px rgba(255, 195, 15, 0.18), 0 0 34px rgba(255, 195, 15, 0.55); } }
/* explicação do modo: altura de 3 linhas para a lista não pular */
.rt-say { margin: 0 0 2px; min-height: 54px; font: 500 12px/1.5 'Plus Jakarta Sans', sans-serif; color: #8090AC; text-wrap: pretty; }
.rt-say.is-in { animation: rtSay 0.45s ease; }
@keyframes rtSay { from { opacity: 0; transform: translateY(5px); } }

.rt-pages { display: flex; flex-direction: column; gap: 10px; }
.rt-pg { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) 62px 26px 26px; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 12px; background: #0B1A30; border: 1px solid rgba(150, 180, 225, 0.12); transition: opacity 0.5s, filter 0.5s, border-color 0.4s, box-shadow 0.4s; }
.rt-pg.is-off { opacity: 0.5; filter: saturate(0.25); }
.rt-pg.is-sweep::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(100deg, transparent 35%, rgba(170, 255, 120, 0.18) 50%, transparent 65%) no-repeat; background-size: 260% 100%; animation: rtSweep 1.1s ease forwards; }
@keyframes rtSweep { from { background-position: 120% 0; } to { background-position: -20% 0; } }
.rt-lt { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font: 700 13px 'Plus Jakarta Sans', sans-serif; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.rt-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rt-slug { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rt-slug b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13px 'Plus Jakarta Sans', sans-serif; color: #D9C8B7; }
.rt-tag { flex: none; display: none; padding: 2px 7px; border-radius: 4px; font: 700 9.5px 'Plus Jakarta Sans', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; font-style: normal; }
.rt-pg.is-off .rt-tag { display: inline-block; color: #FFE08A; background: rgba(255, 195, 15, 0.14); }
.rt-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11.5px 'Plus Jakarta Sans', sans-serif; color: #8090AC; }
/* barra de peso só aparece no modo manual */
.rt-bar { position: relative; height: 0; margin-top: 0; border-radius: 3px; background: #10223D; opacity: 0; transition: height 0.35s ease, margin-top 0.35s ease, opacity 0.3s; }
.rt.is-manual .rt-bar { height: 6px; margin-top: 5px; opacity: 1; }
.rt-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 60%, transparent); }
.rt-knob { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #F5F6FA; border: 2px solid var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent), 0 0 14px var(--c); transform: translate(-50%, -50%) scale(0); transition: transform 0.3s ease; }
.rt.is-manual .rt-pg:not(.is-off) .rt-knob { transform: translate(-50%, -50%) scale(1); }
.rt-share { text-align: right; }
.rt-share b { display: inline-block; font: 700 22px 'Funnel Display', sans-serif; color: #F5F6FA; letter-spacing: -0.01em; }
.rt-share b.is-up { animation: rtUp 1.3s ease; }
.rt-share b.is-down { animation: rtDown 1.3s ease; }
.rt-delta { position: absolute; top: -10px; right: 70px; padding: 3px 8px; border-radius: 999px; font: 700 10.5px 'Plus Jakarta Sans', sans-serif; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity 0.3s, transform 0.3s; pointer-events: none; }
.rt-delta.is-on { opacity: 1; transform: none; }
.rt-delta.up { color: #06101F; background: #8DF24F; box-shadow: 0 0 18px rgba(88, 212, 23, 0.65); }
.rt-delta.down { color: #FFD1C2; background: rgba(252, 113, 72, 0.22); border: 1px solid rgba(252, 113, 72, 0.5); }
.rt-pause, .rt-del { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #8090AC; transition: color 0.3s, background 0.3s, box-shadow 0.3s; }
.rt-pause svg { width: 10px; height: 10px; fill: currentColor; }
.rt-del svg { width: 11px; height: 11px; fill: currentColor; }
.rt-pg.is-off .rt-pause { color: #FFC30F; background: rgba(255, 195, 15, 0.12); }
.rt-pause.is-press { animation: rtPress 0.6s ease; }
@keyframes rtPress { 35% { transform: scale(0.82); box-shadow: 0 0 0 6px rgba(255, 195, 15, 0.25), 0 0 20px rgba(255, 195, 15, 0.6); } }
@keyframes rtUp { 0% { color: #CFFFAE; text-shadow: 0 0 22px rgba(88, 212, 23, 0.95); transform: scale(1.08); } }
@keyframes rtDown { 0% { color: #FFB59E; text-shadow: 0 0 18px rgba(252, 113, 72, 0.8); } }

.rt-add { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; border: 1px dashed rgba(150, 180, 225, 0.25); font: 600 13px 'Plus Jakarta Sans', sans-serif; color: #C3CDDD; }
.rt-add span { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: rgba(150, 180, 225, 0.1); font: 500 16px/1 'Plus Jakarta Sans', sans-serif; color: #D9C8B7; }

/* cursor da demonstração */
.rt-cur { position: absolute; left: 0; top: 0; z-index: 5; width: 20px; height: 24px; pointer-events: none; opacity: 0; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s; }
.rt-cur.is-on { opacity: 1; }
.rt-cur.no-tr { transition: opacity 0.3s; }
.rt-cur svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6)); }
.rt-cur::after { content: ""; position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #FFE08A; opacity: 0; }
.rt-cur.is-click::after { animation: rtRing 0.55s ease-out; }
@keyframes rtRing { from { opacity: 0.9; transform: scale(0.3); } to { opacity: 0; transform: scale(1.6); } }

/* celular: tudo empilhado, sem fitas, altura do conteúdo */
@media (max-width: 760px) {
  .act-vis--rt, .act-vis > he-rotator, .rt { height: auto; }
  .rt .act-scr-hd { padding: 12px 14px 10px; }
  .rt .act-scr-hd b { margin-top: 5px; font-size: 17px; }
  .rt-bd { padding: 12px; }
  .rt-flow { grid-template-columns: minmax(0, 1fr); row-gap: 12px; align-items: stretch; }
  .rt-svg { display: none; }
  .rt-src { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 2px 8px; padding: 12px 14px; border-radius: 12px; }
  .rt-src small { grid-column: 1 / -1; font-size: 11px; }
  .rt-src-n { font-size: 24px; }
  .rt-src-c { font-size: 11px; }
  .rt-src-l { grid-column: 1 / -1; margin-top: 6px; padding-top: 8px; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rt-src-l br { display: none; }
  .rt-copy { grid-column: 1 / -1; justify-self: start; margin: 4px 0 0; padding: 6px 11px; font-size: 11px; }
  .rt-src-p { display: none; }
  .rt-right { gap: 8px; }
  .rt-seg span { padding: 7px 0; font-size: 11.5px; }
  .rt-say { min-height: 68px; font-size: 11px; }
  .rt-pages { gap: 8px; }
  .rt-pg { grid-template-columns: 26px minmax(0, 1fr) 46px 24px; gap: 8px; padding: 9px 10px; }
  .rt-del { display: none; }
  .rt-lt { width: 26px; height: 26px; font-size: 12px; }
  .rt-slug b { font-size: 11.5px; }
  .rt-tag { display: none !important; }
  .rt-meta { font-size: 10px; }
  .rt-share b { font-size: 17px; }
  .rt-pause { width: 24px; height: 24px; }
  .rt-delta { right: 30px; font-size: 9.5px; }
  .rt-add { padding: 8px 10px; font-size: 12px; }
  .rt-add span { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .rt-line { animation: none; }
}