/* Peças da ferramenta reconstruídas (mesmas medidas e cores do painel da extensão) */
.pm { --p: #2186EB; --pd: #1668C9; --pt: #DDF2FE; --ink: #2a2a35; --mu: #8a8a99; --line: #E2EDF7; --bg: #F7FBFF; --card: #fff; --card2: #F9FCFF;
  font-family: "Segoe UI", -apple-system, system-ui, sans-serif; color: var(--ink); text-align: left; line-height: 1.25; position: relative; }
.pm *, .pm *::before, .pm *::after { box-sizing: border-box; }
.pm em { font-style: normal; }
.pm b { font-weight: 800; }
.pm-i { flex: none; display: block; }
.pm-logo { width: 26px; height: 26px; display: block; }
.pm-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 2px 10px rgba(40,40,70,.04); }
.pm-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 12.5px; }
.pm-row > .pm-i:last-child { margin-left: auto; color: var(--mu); }
.pm-ml { font-size: 11.5px; font-weight: 700; color: var(--mu); white-space: nowrap; }
.pm-ibtn { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 9px; display: grid; place-items: center; background: var(--card); color: var(--ink); }
.pm-sel { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 9px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); font-size: 11.5px; color: var(--ink); white-space: nowrap; overflow: hidden; }
.pm-sel.sm { padding: 4px 6px; font-size: 10.5px; border-radius: 8px; }
.pm-sw { display: block; flex: none; width: 34px; height: 20px; border-radius: 99px; background: #dcdce6; position: relative; }
.pm-sw::before { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: .2s; }
.pm-sw.on { background: var(--p); }
.pm-sw.on::before { transform: translateX(14px); }
.pm-rec { display: block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; }
.pm-rec.w { background: #fff; }
.pm-cur { position: absolute; width: 20px; height: 25px; z-index: 6; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.18)); }
.pm-x { position: absolute; right: 12px; top: 10px; color: var(--mu); }
.pm-tag { flex: none; font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--p); background: var(--pt); border-radius: 5px; padding: 2px 4px; }
.pm-k { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #D6E6F7; border-radius: 7px; background: #F3F9FF; color: var(--p); font-size: 12px; font-weight: 700; }
.pm-b { display: inline-flex; align-items: center; padding: 6px 11px; border-radius: 8px; font-size: 11px; font-weight: 800; }
.pm-b.blue { background: var(--p); color: #fff; }
.pm-b.ghost { background: #F3F9FF; color: var(--pd); border: 1px solid #D6E6F7; }
/* números que trocam: <span><em>1</em><em>2</em></span> empilhados */
.pm-count, .pm-segv, .pm-zv, .pm-out, .pm-pt, .pm-time { display: inline-grid; }
.pm-count em, .pm-segv em, .pm-zv em, .pm-out em, .pm-pt em, .pm-time em { grid-area: 1 / 1; }
.pm-time { display: inline-flex; }
.pm-time em { display: inline-block; }

/* passos */
.pm-steps { display: flex; flex-direction: column; gap: 6px; }
.pm-step { display: flex; align-items: center; gap: 6px; padding: 7px 8px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; font-size: 11.5px; white-space: nowrap; overflow: hidden; }
.pm-step.dash { border-style: dashed; }
.pm-step > .pm-i { color: var(--p); }
.pm-grip { color: #c9c5da; font-size: 10px; }
.pm-num { color: var(--p); font-size: 11px; min-width: 9px; display: inline-grid; }
.pm-num em { grid-area: 1 / 1; }
.pm-st { font-size: 11.5px; }
.pm-sum { color: var(--mu); font-size: 10px; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.pm-act { display: flex; gap: 6px; color: #b9b9c8; margin-left: auto; }
.pm-tools { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; padding: 7px; }
.pm-tools span { display: grid; place-items: center; height: 30px; border-radius: 10px; background: var(--pt); color: var(--p); }

/* ===== painel inteiro (topo do site) ===== */
.pm-panel { width: 300px; background: var(--bg); border: 1px solid var(--line); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 24px 50px rgba(18,36,90,.2); }
.pm-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.pm-head .pm-moon { margin-left: auto; }
.pm-capcard { padding: 8px; display: flex; flex-direction: column; gap: 7px; }
.pm-screen { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 11px; color: var(--p); }
.pm-screen .pm-sel { flex: 1; color: var(--ink); }
.pm-capbtn { position: relative; display: grid; place-items: center; height: 36px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card2); font-size: 12.5px; font-weight: 800; overflow: hidden; }
.pm-capbtn > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 7px; }
.pm-capbtn.clear { display: flex; align-items: center; justify-content: center; gap: 7px; background: #e5484d; border-color: #e5484d; color: #fff; }
.pm-cap-b { color: #fff; }
.pm-dock { display: flex; flex-direction: column; gap: 7px; padding-top: 4px; border-top: 1px solid var(--line); }
.pm-mapz { display: flex; align-items: center; justify-content: center; gap: 7px; height: 34px; border-radius: 12px; background: #FFC94D; color: #1d1b2c; font-size: 12.5px; font-weight: 800; }
.pm-playrow { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.pm-play, .pm-stop { display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border-radius: 12px; font-size: 12.5px; font-weight: 800; }
.pm-play { background: var(--p); color: #fff; box-shadow: 0 6px 16px rgba(33,134,235,.3); }
.pm-stop { background: var(--card2); color: var(--mu); border: 1.5px solid var(--line); }
.pm-status { margin: 0; text-align: center; font-size: 10.5px; color: var(--mu); }
/* animação do painel (10s): passos entram, botão vira "Limpar", play toca cada passo */
.pm-hero .pm-steps .pm-step { opacity: 0; transform: translateY(-6px); animation: pm-in 10s infinite; }
.pm-hero .h2 { animation-name: pm-in2 !important; } .pm-hero .h3 { animation-name: pm-in3 !important; } .pm-hero .h4 { animation-name: pm-in4 !important; }
@keyframes pm-in { 0%, 6% { opacity: 0; transform: translateY(-6px); } 9%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes pm-in2 { 0%, 14% { opacity: 0; transform: translateY(-6px); } 17%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes pm-in3 { 0%, 22% { opacity: 0; transform: translateY(-6px); } 25%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes pm-in4 { 0%, 30% { opacity: 0; transform: translateY(-6px); } 33%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.pm-hero .pm-cap-a { animation: pm-capa 10s infinite; } .pm-hero .pm-cap-b { opacity: 0; animation: pm-capb 10s infinite; }
.pm-hero .pm-capbtn { animation: pm-capbg 10s infinite; }
@keyframes pm-capa { 0%, 38% { opacity: 1; } 41%, 100% { opacity: 0; } }
@keyframes pm-capb { 0%, 38% { opacity: 0; } 41%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pm-capbg { 0%, 38% { background: var(--card2); border-color: var(--line); } 41%, 97% { background: #e5484d; border-color: #e5484d; } 100% { background: var(--card2); } }
.pm-hero .pm-play { animation: pm-press 10s infinite; }
@keyframes pm-press { 0%, 45% { transform: none; } 47% { transform: scale(.94); } 50%, 100% { transform: none; } }
.pm-hero .pm-steps .pm-step::after { content: ""; position: absolute; }
.pm-hero .h1 { animation: pm-in 10s infinite, pm-on1 10s infinite; } .pm-hero .h2 { animation: pm-in2 10s infinite, pm-on2 10s infinite !important; }
.pm-hero .h3 { animation: pm-in3 10s infinite, pm-on3 10s infinite !important; } .pm-hero .h4 { animation: pm-in4 10s infinite, pm-on4 10s infinite !important; }
@keyframes pm-on1 { 0%, 50% { background: var(--card); color: var(--ink); } 51%, 60% { background: var(--p); color: #fff; } 61%, 100% { background: var(--card); color: var(--ink); } }
@keyframes pm-on2 { 0%, 61% { background: var(--card); color: var(--ink); } 62%, 71% { background: var(--p); color: #fff; } 72%, 100% { background: var(--card); color: var(--ink); } }
@keyframes pm-on3 { 0%, 72% { background: var(--card); color: var(--ink); } 73%, 82% { background: var(--p); color: #fff; } 83%, 100% { background: var(--card); color: var(--ink); } }
@keyframes pm-on4 { 0%, 83% { background: var(--card); color: var(--ink); } 84%, 93% { background: var(--p); color: #fff; } 94%, 100% { background: var(--card); color: var(--ink); } }

/* ===== captura ===== */
.pm-capture { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 12px; }
.pm-pill { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 12px; border-radius: 99px; background: #20202a; color: #fff; font-size: 11px; white-space: nowrap; box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.pm-pill .pm-rec { animation: pm-blink 1.2s steps(1) infinite; }
@keyframes pm-blink { 50% { opacity: .25; } }
.pm-parar { background: #ff4d4f; color: #fff; font-weight: 800; padding: 4px 10px; border-radius: 99px; }
.pm-toast { background: var(--p); color: #fff; font-size: 10.5px; padding: 7px 12px; border-radius: 10px; text-align: center; box-shadow: 0 8px 20px rgba(33,134,235,.3); }
.pm-mini { width: 88%; }
.pm-capture .pm-step { opacity: 0; animation: pm-c1 6s infinite; }
.pm-capture .c2 { animation-name: pm-c2; } .pm-capture .c3 { animation-name: pm-c3; }
@keyframes pm-c1 { 0%, 15% { opacity: 0; transform: translateY(-5px); } 19%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes pm-c2 { 0%, 45% { opacity: 0; transform: translateY(-5px); } 49%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes pm-c3 { 0%, 75% { opacity: 0; transform: translateY(-5px); } 79%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.pm-capture .pm-count em { opacity: 0; animation: pm-n1 6s infinite steps(1); }
.pm-capture .pm-count em:nth-child(2) { animation-name: pm-n2; } .pm-capture .pm-count em:nth-child(3) { animation-name: pm-n3; }
@keyframes pm-n1 { 0%, 44% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes pm-n2 { 0%, 44% { opacity: 0; } 45%, 74% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes pm-n3 { 0%, 74% { opacity: 0; } 75%, 100% { opacity: 1; } }
.pm-capture .pm-cur { left: 60%; top: 60%; animation: pm-curc 6s infinite; }
@keyframes pm-curc { 0% { transform: translate(40px, 30px); } 14%, 18% { transform: translate(-50px, -10px); } 16% { transform: translate(-50px, -10px) scale(.85); } 44%, 48% { transform: translate(20px, 25px); } 74%, 78% { transform: translate(-20px, 10px); } 76% { transform: translate(-20px, 10px) scale(.85); } 100% { transform: translate(40px, 30px); } }

/* ===== zoom: página aproxima, editor e linha do tempo ===== */
.pm-zoom { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 12px; overflow: hidden; }
.pm-zpage { position: absolute; left: 12px; right: 12px; top: 12px; bottom: 96px; border-radius: 10px; background: #fff; overflow: hidden; padding: 12px 16px; }
.pm-zpage > * { display: block; transform-origin: 20% 80%; animation: pm-zz 6s infinite cubic-bezier(.6,0,.2,1); }
.pm-zpage b { height: 9px; width: 40%; border-radius: 5px; background: #12245A; margin-bottom: 8px; }
.pm-zpage span { height: 5px; width: 60%; border-radius: 3px; background: #9FB2CC; margin-bottom: 6px; }
.pm-zpage span.s { width: 40%; }
.pm-zpage em { height: 14px; width: 22%; border-radius: 99px; background: #EE5D86; margin-top: 8px; }
@keyframes pm-zz { 0%, 38% { transform: none; } 50%, 85% { transform: scale(1.7); } 96%, 100% { transform: none; } }
.pm-editor { align-self: center; z-index: 2; background: #fff; border-radius: 12px; padding: 8px 10px; box-shadow: 0 10px 26px rgba(18,36,90,.18); display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0; transform: translateY(8px); animation: pm-ed 6s infinite; }
@keyframes pm-ed { 0%, 30% { opacity: 0; transform: translateY(8px); } 36%, 86% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(8px); } }
.pm-edrow { display: flex; align-items: center; gap: 6px; }
.pm-zv { font-size: 12px; min-width: 32px; text-align: center; }
.pm-zv em:nth-child(1), .pm-segv em:nth-child(1) { animation: pm-v1 6s infinite steps(1); }
.pm-zv em:nth-child(2), .pm-segv em:nth-child(2) { opacity: 0; animation: pm-v2 6s infinite steps(1); }
@keyframes pm-v1 { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes pm-v2 { 0%, 55% { opacity: 0; } 56%, 100% { opacity: 1; } }
.pm-k.up { animation: pm-key 6s infinite; }
@keyframes pm-key { 0%, 52%, 60%, 100% { background: #F3F9FF; color: var(--p); } 54%, 58% { background: var(--p); color: #fff; } }
.pm-hint { font-size: 9.5px; color: var(--mu); white-space: nowrap; }
.pm-edbtns { display: flex; gap: 6px; }
.pm-tl { z-index: 2; display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 12px; background: #20202a; color: #fff; font-size: 10px; white-space: nowrap; box-shadow: 0 10px 26px rgba(0,0,0,.25); }
.pm-tlplay { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #33334a; }
.pm-tlplay .pm-i { fill: #fff; }
.pm-time em { opacity: 0; width: 0; overflow: hidden; animation: pm-t1 6s infinite steps(1); }
.pm-time em:nth-child(1) { animation-name: pm-t1; } .pm-time em:nth-child(2) { animation-name: pm-t2; } .pm-time em:nth-child(3) { animation-name: pm-t3; }
@keyframes pm-t1 { 0%, 32% { opacity: 1; width: auto; } 33%, 100% { opacity: 0; width: 0; } }
@keyframes pm-t2 { 0%, 32% { opacity: 0; width: 0; } 33%, 65% { opacity: 1; width: auto; } 66%, 100% { opacity: 0; width: 0; } }
@keyframes pm-t3 { 0%, 65% { opacity: 0; width: 0; } 66%, 100% { opacity: 1; width: auto; } }
.pm-rail { position: relative; flex: 1; min-width: 60px; height: 4px; border-radius: 2px; background: #4a4a63; }
.pm-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: #8FD8FA; animation: pm-fill 6s infinite linear; }
.pm-phead { position: absolute; top: -5px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--p); animation: pm-headx 6s infinite linear; }
@keyframes pm-fill { from { width: 0; } to { width: 100%; } }
@keyframes pm-headx { from { left: 0; } to { left: 100%; } }
.pm-seg { position: absolute; left: 34%; width: 44%; top: -14px; height: 13px; border-radius: 5px; background: #FFC94D; color: #3b2a00; font-size: 8.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 3px; border: 1.5px solid #fff; transform-origin: left; transform: scaleX(0); animation: pm-seg 6s infinite; }
@keyframes pm-seg { 0%, 30% { transform: scaleX(0); } 36%, 100% { transform: scaleX(1); } }
.pm-tb { padding: 5px 8px; border-radius: 7px; background: #33334a; font-weight: 800; font-size: 9.5px; }
.pm-tb.red { background: #c0392b; } .pm-tb.ghost { background: none; color: #bfe6ff; }
.pm-add { background: #1d4f86; color: #cfe8ff; animation: pm-addp 6s infinite; }
@keyframes pm-addp { 0%, 29%, 34%, 100% { transform: none; } 31% { transform: scale(.9); } }

/* ===== janelas (modais) ===== */
.pm-modal { width: 280px; background: var(--card); border-radius: 16px; padding: 14px 14px 12px; box-shadow: 0 14px 36px rgba(18,36,90,.16); }
.pm-modal h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 13px; font-weight: 800; }
.pm-f { display: block; margin-bottom: 9px; }
.pm-f > span { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 700; color: var(--mu); margin-bottom: 5px; }
.pm-f output { color: var(--p); font-weight: 800; }
.pm-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.pm-opt h4 { margin: 0; }
.pm-range { position: relative; height: 6px; border-radius: 3px; background: #E3EAF3; margin: 6px 2px; }
.pm-range.sm { flex: 1; min-width: 40px; margin: 0; }
.pm-rfill { position: absolute; left: 0; top: 0; bottom: 0; width: 45%; border-radius: 3px; background: var(--p); }
.pm-rthumb { position: absolute; left: 45%; top: -4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--p); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.pm-range.st .pm-rfill { width: 28%; } .pm-range.st .pm-rthumb { left: 28%; }
.pm-radios { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--ink); }
.pm-radios i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #9aa4b5; margin-left: 4px; }
.pm-radios i.on { border: 3.5px solid var(--p); }
.pm-radios u { width: 18px; height: 9px; background: var(--p); text-decoration: none; display: inline-block; }
.pm-loc { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card2); font-size: 10.5px; font-weight: 600; margin-bottom: 9px; }
.pm-loc b { border: 1px solid var(--line); border-radius: 7px; padding: 0 6px; background: #fff; }
.pm-go { position: relative; display: grid; place-items: center; height: 34px; border-radius: 12px; background: var(--p); color: #fff; font-size: 12px; font-weight: 800; overflow: hidden; box-shadow: 0 6px 16px rgba(33,134,235,.3); }
.pm-go > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 7px; }
.pm-prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #FFC857; }
.pm-saved { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); background: #20202a; color: #fff; font-size: 11px; font-weight: 700; padding: 7px 12px; border-radius: 10px; white-space: nowrap; opacity: 0; z-index: 7; }
.pm-saved b { color: #4ADE80; }
/* salvar (6s): cursor clica, vira "Gravando…", barra enche, aviso de salvo */
.pm-save .pm-cur { left: 58%; bottom: 14px; animation: pm-curs 6s infinite; }
@keyframes pm-curs { 0% { transform: translate(70px, -120px); } 20%, 26% { transform: none; } 23% { transform: scale(.85); } 100% { transform: none; } }
.pm-save .pm-go-a { animation: pm-ga 6s infinite; } .pm-save .pm-go-b { opacity: 0; animation: pm-gb 6s infinite; }
@keyframes pm-ga { 0%, 24% { opacity: 1; } 26%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes pm-gb { 0%, 24% { opacity: 0; } 26%, 70% { opacity: 1; } 72%, 100% { opacity: 0; } }
.pm-save .pm-prog { animation: pm-prog 6s infinite; }
@keyframes pm-prog { 0%, 25% { width: 0; } 70% { width: 100%; } 72%, 100% { width: 0; } }
.pm-save .pm-saved { animation: pm-sv 6s infinite; }
@keyframes pm-sv { 0%, 70% { opacity: 0; transform: translate(-50%, 8px); } 74%, 96% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
/* cursor (6s): o controle anda, o número muda e a setinha cresce */
.pm-cursor .pm-range:not(.st) .pm-rfill { animation: pm-rf 6s infinite cubic-bezier(.6,0,.2,1); }
.pm-cursor .pm-range:not(.st) .pm-rthumb { animation: pm-rt 6s infinite cubic-bezier(.6,0,.2,1); }
@keyframes pm-rf { 0%, 15% { width: 20%; } 35%, 55% { width: 85%; } 75%, 100% { width: 55%; } }
@keyframes pm-rt { 0%, 15% { left: 20%; } 35%, 55% { left: 85%; } 75%, 100% { left: 55%; } }
.pm-out em:nth-child(1) { animation: pm-o1 6s infinite steps(1); }
.pm-out em:nth-child(2) { opacity: 0; animation: pm-o2 6s infinite steps(1); }
.pm-out em:nth-child(3) { opacity: 0; animation: pm-o3 6s infinite steps(1); }
@keyframes pm-o1 { 0%, 24% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes pm-o2 { 0%, 24% { opacity: 0; } 25%, 64% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes pm-o3 { 0%, 64% { opacity: 0; } 65%, 100% { opacity: 1; } }
.pm-prev { position: absolute; right: -54px; top: 46%; width: 44px; height: 54px; }
.pm-prev .pm-cur { position: absolute; left: 0; top: 0; transform-origin: 0 0; animation: pm-grow 6s infinite cubic-bezier(.6,0,.2,1); }
@keyframes pm-grow { 0%, 15% { transform: scale(1); } 35%, 55% { transform: scale(2.2); } 75%, 100% { transform: scale(1.6); } }
/* sons (3,6s): cada som toca na sua vez */
.pm-snd { display: flex; align-items: center; gap: 7px; padding: 6px 0; }
.pm-snd .pm-ml { width: 44px; }
.pm-snd .pm-sel { width: 70px; }
.pm-pv { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); color: var(--p); background: #fff; }
.pm-pv .pm-i { fill: var(--p); }
.pm-sound .pm-pv { animation: pm-pv 3.6s infinite; }
.pm-sound .s2 .pm-pv { animation-delay: 1.2s; } .pm-sound .s3 .pm-pv { animation-delay: 2.4s; }
@keyframes pm-pv { 0%, 30%, 100% { background: #fff; box-shadow: 0 0 0 0 rgba(33,134,235,.4); } 6% { background: var(--pt); box-shadow: 0 0 0 7px rgba(33,134,235,0); } }
/* modo noturno (6s): o painel troca de tema */
.pm-dark { width: 270px; animation: pm-dk 6s infinite; }
@keyframes pm-dk { 0%, 42% { --bg: #F7FBFF; --card: #fff; --card2: #F9FCFF; --ink: #2a2a35; --line: #E2EDF7; --pt: #DDF2FE; }
  50%, 92% { --bg: #15141c; --card: #1f1e29; --card2: #25243a; --ink: #ecebf5; --line: #34324a; --pt: #2a2545; }
  100% { --bg: #F7FBFF; --card: #fff; --card2: #F9FCFF; --ink: #2a2a35; --line: #E2EDF7; --pt: #DDF2FE; } }
.pm-dark .pm-moon { animation: pm-moon 6s infinite; }
@keyframes pm-moon { 0%, 40%, 52%, 100% { transform: none; } 45% { transform: scale(.85); } 46%, 92% { color: #FFC857; } }
/* pausas (6s): uma pausa entra e muda de 1s pra 2s */
.pm-pause { width: 280px; }
.pm-ins { overflow: hidden; height: 0; animation: pm-ins 6s infinite cubic-bezier(.6,0,.2,1); }
@keyframes pm-ins { 0%, 15% { height: 0; opacity: 0; } 28%, 92% { height: 34px; opacity: 1; } 100% { height: 0; opacity: 0; } }
.pm-pause .pm-pt em:nth-child(1) { animation: pm-p1 6s infinite steps(1); }
.pm-pause .pm-pt em:nth-child(2) { opacity: 0; animation: pm-p2 6s infinite steps(1); }
@keyframes pm-p1 { 0%, 54% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes pm-p2 { 0%, 54% { opacity: 0; } 55%, 100% { opacity: 1; } }
.pm-pause .pm-num .pm-pt em:nth-child(1) { animation-name: pm-q1; } .pm-pause .pm-num .pm-pt em:nth-child(2) { animation-name: pm-q2; }
@keyframes pm-q1 { 0%, 21% { opacity: 1; } 22%, 100% { opacity: 0; } }
@keyframes pm-q2 { 0%, 21% { opacity: 0; } 22%, 100% { opacity: 1; } }
/* app no Windows (6s) */
.pm-app { width: 280px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 14px 36px rgba(18,36,90,.16); }
.pm-apphead { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.pm-appsub { margin: 0; font-size: 10.5px; color: var(--mu); }
.pm-appcap { padding: 8px; text-align: center; }
.pm-appcap .pm-capbtn { display: flex; align-items: center; justify-content: center; gap: 7px; animation: pm-apress 6s infinite; }
@keyframes pm-apress { 0%, 8%, 14%, 100% { transform: none; } 11% { transform: scale(.95); } }
.pm-appcap p { margin: 6px 0 0; font-size: 10px; color: var(--mu); }
.pm-appcap kbd { font: 700 9px "Segoe UI"; border: 1px solid var(--line); border-radius: 5px; padding: 1px 4px; background: #fff; }
.pm-applist { padding: 7px; display: flex; flex-direction: column; gap: 5px; min-height: 120px; }
.pm-applist .pm-step { opacity: 0; animation: pm-c1 6s infinite; }
.pm-applist .a2 { animation-name: pm-c2; } .pm-applist .a3 { animation-name: pm-c3; }

/* ===== onde as peças aparecem ===== */
.ui-stage { position: relative; overflow: hidden; background: var(--blue-tint); border-color: transparent; display: grid; place-items: center; }
.ui-fit { transform-origin: center; }
.hero-ill { position: relative; }
.hero-ui { position: absolute; right: -36px; top: 2%; z-index: 2; transform: scale(.78); transform-origin: top right; animation: pm-float 5s ease-in-out infinite; }
@keyframes pm-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@media (max-width: 1000px) { .hero-ui { right: 0; } }
@media (max-width: 640px) { .hero-ui { display: none; } }
@media (prefers-reduced-motion: reduce) { .pm, .pm *, .hero-ui { animation: none !important; } .pm-hero .pm-step, .pm-capture .pm-step, .pm-applist .pm-step, .pm-editor { opacity: 1 !important; transform: none !important; } }

/* encaixes */
.shot.ui-stage { height: 220px; }
.ui-stage > .pm-capture, .ui-stage > .pm-zoom { position: absolute; inset: 0; }
.ui-fit.s-save { transform: scale(.52); margin-top: 40px; }
.ui-fit.f-zoom { position: absolute; inset: 0; }
.ui-fit.f-zoom .pm-zoom { position: absolute; inset: 0; }
.ui-fit.f-cursor { transform: scale(.68); margin-left: -60px; }
.ui-fit.f-sound { transform: scale(.82); }
.ui-fit.f-dark { transform: scale(.66); margin-top: 30px; }
.ui-fit.f-pause { transform: scale(.9); }
.ui-fit.f-save { transform: scale(.5); margin-top: -10px; }
.ui-fit.f-app { transform: scale(.66); margin-top: 20px; }
/* ajustes: as regras de imagem do site não podem esticar as peças */
.pm img.pm-logo { width: 26px !important; height: 26px !important; max-width: none !important; object-fit: contain; }
.pm svg { max-width: none; }
.pm-head { justify-content: flex-start; text-align: left; }
.ui-stage > .pm-zoom { zoom: .82; }
.ui-fit.f-zoom .pm-zoom { zoom: 1; }
.ui-fit.s-save { transform: scale(.72) translateY(-34%); margin-top: 0; }
.ui-fit.f-save { transform: scale(.78) translateY(-30%); margin-top: 0; }
.ui-fit.f-dark { transform: scale(.62); margin-top: 0; translate: 0 34%; }
.ui-fit.f-app { transform: scale(.7); margin-top: 0; translate: 0 6%; }
.pm-save { overflow: visible; }
.ui-fit.f-dark { transform: scale(.6); translate: none; }

/* ===== zoom (v2): janela limpa, moldura rosa no alvo, câmera aproxima, linha do tempo clara ===== */
.pz { position: absolute; inset: 0; padding: 16px 18px 12px; display: flex; flex-direction: column; gap: 10px; font-family: "Inter", system-ui, sans-serif; }
.pz *, .pz *::before { box-sizing: border-box; }
.pz-win { flex: 1; min-height: 0; border-radius: 16px; background: #fff; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 14px 30px rgba(18,36,90,.08); }
.pz-bar { flex: none; height: 20px; display: flex; align-items: center; gap: 5px; padding: 0 11px; background: #F3F7FD; }
.pz-bar i { width: 7px; height: 7px; border-radius: 50%; background: #EE5D86; } .pz-bar i + i { background: #FFC857; } .pz-bar i + i + i { background: #8FD8FA; }
.pz-cam { position: relative; flex: 1; overflow: hidden; background: #F7FAFF; }
.pz-page { position: absolute; inset: 0; padding: 12px 14px; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1.25fr 1fr; gap: 9px; transform-origin: 80% 34%; animation: pz-cam 8s infinite cubic-bezier(.65,0,.2,1); }
@keyframes pz-cam { 0%, 32% { transform: none; } 42%, 76% { transform: scale(2); } 86%, 100% { transform: none; } }
.pz-hero { grid-column: span 2; border-radius: 12px; background: #2186EB; padding: 11px 13px; display: flex; flex-direction: column; gap: 5px; }
.pz-hero b { height: 8px; width: 55%; border-radius: 4px; background: #fff; }
.pz-hero span { height: 5px; width: 40%; border-radius: 3px; background: rgba(255,255,255,.55); }
.pz-hero em { margin-top: auto; height: 13px; width: 26%; border-radius: 99px; background: #FFC857; }
.pz-side { position: relative; border-radius: 12px; background: #fff; display: grid; place-items: center; }
.pz-donut { width: 46%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(#EE5D86 0 72%, #EAF1FB 0); -webkit-mask: radial-gradient(circle, transparent 46%, #000 47%); mask: radial-gradient(circle, transparent 46%, #000 47%); }
.pz-c { border-radius: 12px; background: #fff; padding: 9px 10px; display: flex; flex-direction: column; gap: 5px; }
.pz-c b { width: 18px; height: 18px; border-radius: 6px; background: #8FD8FA; } .pz-c:nth-of-type(3) b { background: #FFC857; } .pz-c:nth-of-type(4) b { background: #FFD9E3; }
.pz-c span { height: 5px; width: 70%; border-radius: 3px; background: #DCE5F2; }
.pz-frame { position: absolute; left: calc(66.6% + 2px); top: 8px; width: calc(33.3% - 12px); height: calc(55% - 6px); border-radius: 15px; border: 2.5px solid #EE5D86; opacity: 0; transform: scale(1.12); animation: pz-frame 8s infinite; }
@keyframes pz-frame { 0%, 14% { opacity: 0; transform: scale(1.12); } 20%, 34% { opacity: 1; transform: none; } 40%, 100% { opacity: 0; transform: none; } }
.pz-tl { flex: none; display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 7px; border-radius: 99px; background: #fff; box-shadow: 0 8px 20px rgba(18,36,90,.07); }
.pz-play { width: 24px; height: 24px; border-radius: 50%; background: #12245A; color: #fff; display: grid; place-items: center; flex: none; }
.pz-play .pm-i { fill: #fff; margin-left: 1px; }
.pz-rail { position: relative; flex: 1; height: 6px; border-radius: 3px; background: #E8EFF8; }
.pz-seg { position: absolute; left: 32%; width: 50%; top: -6px; height: 18px; border-radius: 99px; background: #FFC857; color: #12245A; font: 800 9.5px/18px Inter, sans-serif; font-style: normal; display: flex; align-items: center; justify-content: center; gap: 3px; }
.pz-head { position: absolute; top: -5px; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: #2186EB; animation: pm-headx 8s infinite linear; }

/* ===== salvar MP4 (v2): três escolhas, um botão, o arquivo chega ===== */
.ps { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; font-family: "Inter", system-ui, sans-serif; }
.ps *, .ps *::before { box-sizing: border-box; }
.ps-card { width: 78%; max-width: 270px; border-radius: 18px; background: #fff; padding: 14px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 14px 30px rgba(18,36,90,.08); }
.ps-chips { display: flex; gap: 6px; justify-content: center; }
.ps-chips span { padding: 5px 10px; border-radius: 99px; background: #EAF4FE; color: #2186EB; font-size: 11px; font-weight: 700; white-space: nowrap; }
.ps-btn { position: relative; height: 38px; border-radius: 99px; background: #2186EB; color: #fff; font-size: 13px; font-weight: 800; overflow: hidden; animation: pz-press 6s infinite; }
.ps-btn > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 7px; }
.ps-a i { width: 9px; height: 9px; border-radius: 50%; background: #fff; }
.ps-a { animation: ps-a 6s infinite steps(1); } .ps-b { opacity: 0; animation: ps-b 6s infinite steps(1); }
@keyframes ps-a { 0%, 29% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes ps-b { 0%, 29% { opacity: 0; } 30%, 62% { opacity: 1; } 63%, 100% { opacity: 0; } }
.ps-prog { position: absolute; left: 0; bottom: 0; height: 4px; background: #FFC857; width: 0; animation: ps-prog 6s infinite linear; }
@keyframes ps-prog { 0%, 30% { width: 0; } 60% { width: 100%; } 62%, 100% { width: 100%; opacity: 0; } }
@keyframes pz-press { 0%, 26%, 31%, 100% { transform: none; } 28% { transform: scale(.95); } }
.ps-file { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; background: #fff; font-size: 12px; color: #12245A; box-shadow: 0 8px 20px rgba(18,36,90,.08); opacity: 0; transform: translateY(-12px); animation: ps-file 6s infinite; }
.ps-ic { width: 24px; height: 24px; border-radius: 50%; background: #EE5D86; color: #fff; display: grid; place-items: center; }
.ps-ic .pm-i { fill: #fff; margin-left: 1px; }
.ps-file em { font-style: normal; font-weight: 800; color: #2186EB; }
@keyframes ps-file { 0%, 62% { opacity: 0; transform: translateY(-12px); } 68%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
.ps .pm-cur { position: absolute; width: 22px; left: 50%; top: 50%; animation: ps-cur 6s infinite; }
@keyframes ps-cur { 0% { transform: translate(70px, 70px); } 22%, 26% { transform: translate(10px, 4px); } 28% { transform: translate(10px, 4px) scale(.85); } 31%, 55% { transform: translate(10px, 4px); } 75%, 100% { transform: translate(70px, 70px); } }
@media (prefers-reduced-motion: reduce) { .pz *, .ps * { animation: none !important; } .ps-file { opacity: 1; transform: none; } }
.pz-page { grid-template-columns: 1.8fr 1fr; grid-template-rows: 1fr; transform-origin: 82% 50%; }
.pz-hero { grid-column: auto; }
.pz-donut { width: auto; height: 70%; }
.pz-frame { left: -4px; top: -4px; right: -4px; bottom: -4px; width: auto; height: auto; border-radius: 16px; }
@keyframes pz-cam { 0%, 32% { transform: none; } 42%, 76% { transform: scale(1.75); } 86%, 100% { transform: none; } }
@keyframes ps-a { 0%, 29% { opacity: 1; } 30%, 62% { opacity: 0; } 63%, 100% { opacity: 1; } }
@keyframes ps-cur { 0% { transform: translate(90px, 80px); } 22%, 26% { transform: translate(10px, 4px); } 28% { transform: translate(10px, 4px) scale(.85); } 31%, 50% { transform: translate(10px, 4px); } 70%, 100% { transform: translate(110px, 90px); } }
.pz-page { transform-origin: 90% 50%; }