/* ===========================================================================
   VERSÕES ASSINATURA  (html[data-versao=assinatura]) + fundo que reage ao mouse
   A versão base não muda: tudo aqui só vale com data-versao=assinatura.
   =========================================================================== */

/* ---- fundo que reage ao mouse ---- */
#ripple{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* tinta fluida (Vermelha e Ciano): WebGL atrás da página, soma de luz sobre o fundo escuro */
#fluido{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;mix-blend-mode:screen;display:none}
html[data-versao=assinatura][data-fluido=on] #fluido{display:block}
html[data-fx-mouse=off] html[data-versao=assinatura] #ripple{display:none}
html[data-versao=assinatura] #kanjibg span{transition:translate .18s linear}
@media (prefers-reduced-motion:reduce){html[data-versao=assinatura] #ripple{display:none}html[data-versao=assinatura] #kanjibg span{transition:none;translate:none!important}}

/* ---- seletor Base / Assinatura (aba SKIN) ---- */
.seg-radio{display:flex;gap:8px;flex-wrap:wrap}
.seg-radio button{min-height:44px;padding:0 22px;background:transparent;border:1px solid var(--line);color:var(--ink);font:600 15px var(--ui);letter-spacing:.08em;cursor:pointer}
.seg-radio button:hover{border-color:var(--red)}
.seg-radio button[aria-checked=true]{background:var(--red);border-color:var(--red);color:var(--bg)}
.seg-radio button:focus-visible{outline:3px solid var(--cy);outline-offset:2px}
.versao-desc{margin:4px 0 0;font:14px/1.5 var(--mono);color:var(--muted)}

/* ---- camadas (só aparecem na assinatura) ---- */
#sigcanvas,#sigdeco,#sigtop{position:fixed;inset:0;pointer-events:none;display:none}
#sigcanvas{z-index:0;width:100%;height:100%}
#sigdeco{z-index:0;overflow:hidden}
#sigtop{z-index:9990;overflow:hidden}
html[data-versao=assinatura] #sigcanvas,html[data-versao=assinatura] #sigdeco,html[data-versao=assinatura] #sigtop{display:block}
html[data-versao=assinatura] #rain{display:none}
html[data-fx-rain=off] #sigcanvas{display:none!important}
html[data-fx-kanji=off] #kanjibg{display:none}
@keyframes sg-blink{0%,60%{opacity:.55}61%,70%{opacity:.1}71%,100%{opacity:.55}}
@keyframes sg-spin{to{transform:rotate(360deg)}}
@keyframes sg-bar{0%,70%,100%{opacity:0}72%,76%{opacity:1;transform:translateX(-6px)}78%{opacity:.5;transform:translateX(8px)}}
@keyframes sg-flow{to{stroke-dashoffset:-64}}
@keyframes sg-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(4vw,-3vh) scale(1.15)}}
@keyframes sg-grow{0%,100%{height:var(--h)}50%{height:calc(var(--h) * .35)}}
@media (prefers-reduced-motion:reduce){#sigdeco *,#sigtop *{animation:none!important}}
/* decoração pesada some no celular; fundos e cores ficam */
@media (max-width:900px){.sg-plate,.sg-radar,.sg-hanko,.sg-bars,.sg-databars,.sg-errtxt,.sg-warn,.sg-pcb,.sg-glitchbar,.sg-rings,.sg-sun{display:none}}

/* ======================= 1) MATRIX — monitor de fósforo ======================= */
html[data-versao=assinatura][data-skin=matrix]{--cy:#7dffa8;--cy-rgb:125,255,168;--mg:#c8ffb0;--mg-rgb:200,255,176;--logo-font:'VT323','Share Tech Mono',monospace}
html[data-versao=assinatura][data-skin=matrix] #kanjibg{display:none}
html[data-versao=assinatura][data-skin=matrix] #sigcanvas{opacity:.5}
html[data-versao=assinatura][data-skin=matrix] .wm{font-size:46px;letter-spacing:.1em}
html[data-versao=assinatura][data-skin=matrix] .para p,html[data-versao=assinatura][data-skin=matrix] .vazio{font-family:var(--mono);letter-spacing:.015em}
html[data-versao=assinatura][data-skin=matrix] body{text-shadow:0 0 7px rgba(var(--rgb),.5)}
html[data-versao=assinatura][data-skin=matrix] .tile.p,html[data-versao=assinatura][data-skin=matrix] .tile.y{border-color:var(--red)}
html[data-versao=assinatura][data-skin=matrix] .tile.p .v,html[data-versao=assinatura][data-skin=matrix] .tile.y .v{color:var(--red)}
.sg-crt-grain{position:absolute;inset:0;background-image:radial-gradient(rgba(var(--rgb),.09) 1px,transparent 1.6px);background-size:4px 4px;opacity:.7}
.sg-crt-glare{position:absolute;inset:0;background:radial-gradient(ellipse 42% 26% at 26% 15%,rgba(215,255,228,.085),transparent 72%),radial-gradient(ellipse at center,transparent 42%,rgba(0,0,0,.5))}
.sg-crt-roll{position:absolute;left:0;right:0;height:16%;top:-20%;background:linear-gradient(180deg,transparent,rgba(var(--rgb),.06),transparent);animation:sg-roll 12s linear infinite}
@keyframes sg-roll{to{top:112%}}
.sg-boot{position:fixed;inset:0;z-index:10000;background:#000;color:var(--red);font:24px/1.4 'VT323',monospace;padding:8vh 8vw;white-space:pre;text-shadow:0 0 8px var(--red);transition:opacity .45s;cursor:pointer}

/* ======================= 2) VERMELHA — invasor / hacker / oriental ======================= */
html[data-versao=assinatura][data-skin=vermelha]{--logo-font:'Valorax','Chakra Petch',sans-serif}
html[data-versao=assinatura][data-skin=vermelha] #sigcanvas{opacity:.42}
html[data-versao=assinatura][data-skin=vermelha] #kanjibg span{writing-mode:vertical-rl;text-orientation:upright;letter-spacing:.18em;font-size:calc(var(--sz,140px) * .8);opacity:calc(var(--op,.06) * 1.7 + var(--g,0) * .08)}
html[data-versao=assinatura][data-skin=vermelha] .tag{background:repeating-linear-gradient(135deg,var(--red) 0 10px,var(--edge2) 10px 20px)}
html[data-versao=assinatura][data-skin=vermelha] .tag,html[data-versao=assinatura][data-skin=vermelha] .tag i{color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.6)}
html[data-versao=assinatura][data-skin=vermelha] .panel>.inner{box-shadow:inset 0 0 30px rgba(var(--rgb),.1)}
.sg-sun{position:absolute;right:-9vmin;top:14vh;width:54vmin;height:54vmin;border-radius:50%;background:radial-gradient(circle,rgba(var(--rgb),.1),rgba(var(--rgb),.03) 60%,transparent 62%);border:2px solid rgba(var(--rgb),.25);box-shadow:0 0 90px rgba(var(--rgb),.12)}
.sg-hanko{position:absolute;right:54px;bottom:78px;width:66px;height:66px;display:grid;place-items:center;background:var(--red);color:var(--bg);font:900 42px var(--jp);transform:rotate(-7deg);opacity:.5;border:3px double rgba(255,255,255,.35)}
.sg-warn{position:absolute;width:44px;height:40px;color:var(--red);animation:sg-blink 1.8s steps(1) infinite}
.sg-errtxt{position:absolute;font:12px var(--mono);letter-spacing:.14em;color:rgba(var(--rgb),.55);animation:sg-blink 3s steps(1) infinite}
.sg-bars{position:absolute;display:flex;align-items:flex-end;gap:3px;height:30px;opacity:.55}
.sg-bars i,.sg-databars i{display:block;width:4px;background:var(--red);--h:60%;height:var(--h);animation:sg-grow var(--d,1.4s) ease-in-out infinite;animation-delay:var(--l,0s)}

/* ======================= 3) MAGENTA — cidade neon / Sandevistan ======================= */
html[data-versao=assinatura][data-skin=magenta]{--logo-font:'Valorax','Orbitron',sans-serif}
html[data-versao=assinatura][data-skin=magenta] #sigcanvas{opacity:.8}
html[data-versao=assinatura][data-skin=magenta] .wm .a{filter:drop-shadow(-5px 0 0 rgba(var(--cy-rgb),.55)) drop-shadow(-10px 0 0 rgba(var(--mg-rgb),.4)) drop-shadow(-15px 0 0 rgba(255,140,40,.28))}
html[data-versao=assinatura][data-skin=magenta] #kanjibg span{color:var(--red);opacity:calc(var(--op,.06) * 1.8 + var(--g,0) * .1);text-shadow:0 0 18px var(--red),0 0 46px var(--mg),0 0 calc(var(--g,0) * 34px) #fff}
html[data-versao=assinatura][data-skin=magenta] .panel>.inner{box-shadow:inset 0 0 28px rgba(var(--rgb),.15),inset 0 0 2px rgba(var(--cy-rgb),.5)}
html[data-versao=assinatura][data-skin=magenta] .tag{transform:skewX(-8deg);box-shadow:0 0 14px rgba(var(--rgb),.55)}
html[data-versao=assinatura][data-skin=magenta] .nav button[aria-current=page]{box-shadow:0 0 22px rgba(var(--rgb),.7),0 0 2px #fff}
.sg-orb{position:absolute;border-radius:50%;background:radial-gradient(circle,var(--c),transparent 68%);filter:blur(14px);opacity:.3;animation:sg-drift 24s ease-in-out infinite alternate}
.sg-glitchbar{position:absolute;height:12px;background:rgba(var(--mg-rgb),.4);mix-blend-mode:screen;opacity:0;animation:sg-bar 6s steps(1) infinite}

/* ======================= 4) CIANO — circuitos / internet limpa ======================= */
html[data-versao=assinatura][data-skin=ciano]{--logo-font:'Circuit Forem','Chakra Petch',sans-serif}
html[data-versao=assinatura][data-skin=ciano] #kanjibg{display:none}
html[data-versao=assinatura][data-skin=ciano] .panel{--c:10px}
html[data-versao=assinatura][data-skin=ciano] .panel>.inner{--c:9px;backdrop-filter:blur(7px);background:rgba(var(--panel-rgb),.38)}
html[data-versao=assinatura][data-skin=ciano] body::after{background:radial-gradient(ellipse at center,transparent 62%,rgba(0,0,0,.4))}
.sg-hex{position:absolute;inset:0;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 2l26 15v30L28 62 2 47V17zM28 62v30M2 47L2 77 28 92M54 47v30L28 92' fill='none' stroke='%2300e5ff' stroke-width='1.2'/%3E%3C/svg%3E")}
.sg-rings{position:absolute;right:-70px;bottom:-70px;width:420px;height:420px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 14px,rgba(var(--rgb),.2) 14px 15px);-webkit-mask-image:radial-gradient(circle,#000 18%,transparent 70%);mask-image:radial-gradient(circle,#000 18%,transparent 70%)}
.sg-pcb{position:absolute;top:0;bottom:0;width:min(220px,16vw);opacity:.75}
.sg-pcb.l{left:0}.sg-pcb.r{right:0;transform:scaleX(-1)}
.sg-pcb path{stroke:var(--red);stroke-width:1.5;stroke-dasharray:6 10;animation:sg-flow 7s linear infinite}
.sg-pcb circle{fill:var(--red)}

/* ======================= 5) AMARELO — industrial / scanner ======================= */
html[data-versao=assinatura][data-skin=ambar]{--logo-font:'Valorax','Chakra Petch',sans-serif}
html[data-versao=assinatura][data-skin=ambar] #kanjibg{display:none}
html[data-versao=assinatura][data-skin=ambar] .vc{display:none}
html[data-versao=assinatura][data-skin=ambar] .tag,html[data-versao=assinatura][data-skin=ambar] .nav button,html[data-versao=assinatura][data-skin=ambar] .sk-name{font-family:'Saira Stencil One','Chakra Petch',sans-serif;letter-spacing:.08em}
html[data-versao=assinatura][data-skin=ambar] .panel{--c:6px}
html[data-versao=assinatura][data-skin=ambar] .panel>.inner{--c:5px}
.sg-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(var(--rgb),.06) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--rgb),.06) 1px,transparent 1px),linear-gradient(rgba(var(--rgb),.13) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--rgb),.13) 1px,transparent 1px);background-size:24px 24px,24px 24px,120px 120px,120px 120px}
.sg-ruler{position:absolute;top:34px;bottom:34px;width:13px;background:repeating-linear-gradient(180deg,rgba(var(--rgb),.55) 0 1px,transparent 1px 10px),repeating-linear-gradient(180deg,rgba(var(--rgb),.95) 0 2px,transparent 2px 50px)}
.sg-ruler.l{left:6px}.sg-ruler.r{right:6px;transform:scaleX(-1)}
.sg-radar{position:absolute;left:calc(50% - 150px);bottom:120px;width:180px;height:180px;border-radius:50%;border:1px solid rgba(var(--rgb),.5);opacity:.3;background:repeating-radial-gradient(circle,transparent 0 22px,rgba(var(--rgb),.3) 22px 23px),linear-gradient(rgba(var(--rgb),.4),rgba(var(--rgb),.4)) center/1px 100% no-repeat,linear-gradient(rgba(var(--rgb),.4),rgba(var(--rgb),.4)) center/100% 1px no-repeat}
.sg-radar i{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(var(--rgb),.6),transparent 28%);animation:sg-spin 5s linear infinite}
.sg-plate{position:absolute;left:250px;top:56px;border:2px solid rgba(var(--rgb),.6);padding:6px 10px;font:12px/1.35 'Saira Stencil One',sans-serif;color:var(--red);letter-spacing:.14em;background:rgba(var(--bg-rgb),.6);opacity:.55}
.sg-barcode{margin-top:5px;height:14px;width:130px;background:repeating-linear-gradient(90deg,var(--red) 0 2px,transparent 2px 4px,var(--red) 4px 5px,transparent 5px 8px,var(--red) 8px 11px,transparent 11px 13px)}
.sg-databars{position:absolute;display:flex;align-items:flex-end;gap:3px;height:46px;opacity:.55}
.sg-hazard{position:absolute;left:0;right:0;height:9px;background:repeating-linear-gradient(-45deg,var(--red) 0 12px,#0d0800 12px 24px)}
.sg-hazard.t{top:0}.sg-hazard.b{bottom:0}

/* ===== telas de abertura: Vermelha (plugin de quebra de senha) e Magenta (vice synth) ===== */
.sg-boot.hk{padding:7vh 8vw;white-space:normal;font:20px/1.5 'Share Tech Mono',monospace;color:#ff6670;text-shadow:0 0 8px rgba(255,36,56,.7);background:radial-gradient(ellipse at center,#1c0408,#000 72%);overflow:hidden}
.sg-boot.hk::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px)}
.hk-top{font-size:24px;letter-spacing:.12em;color:#fff;border-bottom:1px solid #ff2438;padding-bottom:8px;margin-bottom:12px}
.hk-row i{font-style:normal;color:#fff}
.hk-pass{display:flex;gap:.1em;font:700 clamp(36px,7.4vw,92px)/1 'VT323','Share Tech Mono',monospace;margin:4vh 0 3vh;color:#7a1a22;text-shadow:0 0 10px rgba(255,36,56,.5)}
.hk-pass span{display:inline-block;min-width:.62em;text-align:center}
.hk-pass span.lk{color:#fff;text-shadow:0 0 16px #ff2438,0 0 3px #ff2438}
.hk-bar{height:14px;border:1px solid #ff2438;box-shadow:0 0 10px rgba(255,36,56,.4)}
.hk-bar span{display:block;height:100%;width:0;background:repeating-linear-gradient(135deg,#ff2438 0 8px,#8f0f1c 8px 16px)}
.hk-pct{margin-top:6px;color:#fff;letter-spacing:.1em}
.hk-hash{margin-top:12px;opacity:.4;font-size:14px;overflow:hidden;white-space:nowrap;height:1.5em}
.hk-log{margin-top:10px;min-height:9em;white-space:pre-wrap;color:#ff9aa1}
.hk-ok{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font:900 clamp(40px,9.5vw,130px)/1 'Valorax','Chakra Petch',sans-serif;color:#ff2438;opacity:0;padding:3vh 0;background:rgba(0,0,0,.72);text-shadow:-5px 0 #00e5ff,5px 0 #fff,0 0 34px #ff2438;white-space:nowrap}
.sg-boot.hk.ok .hk-ok{opacity:1;animation:hk-glitch .3s steps(2) 4}
@keyframes hk-glitch{50%{transform:translateY(-50%) translateX(10px) skewX(-7deg)}}

.sg-boot.vice{padding:0;white-space:normal;overflow:hidden;color:#fff;text-shadow:none;font-family:'Circuit Forem','Chakra Petch',sans-serif;
  background:linear-gradient(180deg,#07010f 0%,#1a0536 40%,#52107a 61%,#ff2bd6 64%,#12021f 64.15%,#0a0116 100%)}
.sg-boot.vice::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55))}
.vc-sun{position:absolute;left:50%;top:21%;width:42vmin;height:42vmin;margin-left:-21vmin;border-radius:50%;background:linear-gradient(180deg,#fff06a 0%,#ff9b3d 40%,#ff2bd6 100%);box-shadow:0 0 90px rgba(255,43,214,.55);
  -webkit-mask-image:linear-gradient(180deg,#000 0 52%,transparent 52% 56%,#000 56% 66%,transparent 66% 72%,#000 72% 80%,transparent 80% 88%,#000 88% 94%,transparent 94%);mask-image:linear-gradient(180deg,#000 0 52%,transparent 52% 56%,#000 56% 66%,transparent 66% 72%,#000 72% 80%,transparent 80% 88%,#000 88% 94%,transparent 94%)}
.vc-grid{position:absolute;left:-60%;right:-60%;top:64%;bottom:-20%;transform:perspective(380px) rotateX(62deg);transform-origin:top;
  background:repeating-linear-gradient(90deg,rgba(255,43,214,.75) 0 2px,transparent 2px 64px),repeating-linear-gradient(0deg,rgba(0,229,255,.6) 0 2px,transparent 2px 48px);animation:vc-scroll .7s linear infinite}
@keyframes vc-scroll{from{background-position:0 0,0 0}to{background-position:0 0,0 48px}}
.vc-bar{position:absolute;left:0;right:0;height:7%;top:-10%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.1),transparent);animation:vc-track 2.4s linear infinite}
@keyframes vc-track{to{top:110%}}
.vc-vhs{position:absolute;left:5vw;right:5vw;top:5vh;display:flex;justify-content:space-between;font:30px 'VT323',monospace;color:#fff;text-shadow:2px 0 #ff2bd6,-2px 0 #00e5ff}
.vc-title{position:absolute;left:0;right:0;top:11%;margin:0;text-align:center;font:400 clamp(72px,17vmin,200px)/1 'Circuit Forem','Chakra Petch',sans-serif;letter-spacing:.07em;color:#fff;text-shadow:-7px 0 #00e5ff,7px 0 #ff2bd6,0 0 40px rgba(255,43,214,.7);animation:vc-jit 1.3s steps(1) infinite}
@keyframes vc-jit{0%,88%,100%{transform:none}90%{transform:translateX(-10px) skewX(6deg)}94%{transform:translateX(8px)}}
.vc-sub{position:absolute;left:0;right:0;top:41%;text-align:center;font:600 clamp(14px,2.4vmin,26px) 'Chakra Petch',sans-serif;letter-spacing:.5em;color:#00e5ff;text-shadow:0 0 12px #00e5ff}
.vc-ask{position:absolute;left:0;right:0;bottom:17%;text-align:center;font:600 clamp(16px,3vmin,30px) 'Chakra Petch',sans-serif;letter-spacing:.3em;color:#ff2bd6;text-shadow:0 0 14px #ff2bd6;overflow:hidden;white-space:nowrap;animation:vc-type 1.3s steps(22) .9s both}
@keyframes vc-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.vc-press{position:absolute;left:0;right:0;bottom:9%;text-align:center;font:600 clamp(14px,2.2vmin,22px) 'Chakra Petch',sans-serif;letter-spacing:.4em;color:#fff;animation:vc-blink 1s steps(1) infinite 2s}
@keyframes vc-blink{50%{opacity:0}}
.vc-date{position:absolute;left:5vw;bottom:5vh;font:28px 'VT323',monospace;color:#fff;text-shadow:2px 0 #ff2bd6,-2px 0 #00e5ff}
@media (max-width:900px){.hk-pass{font-size:clamp(28px,8vw,60px)}.vc-sun{top:24%}}

/* âmbar assinatura: sem kanjis (o selo 音声→文字 e os rótulos sobrepunham a placa de série) */
html[data-versao=assinatura][data-skin=ambar] .docbody::after,
html[data-versao=assinatura][data-skin=ambar] .tagrow .kanji,
html[data-versao=assinatura][data-skin=ambar] .kanji-box,
html[data-versao=assinatura][data-skin=ambar] .rail.r,
html[data-versao=assinatura][data-skin=ambar] .strip .jp,
html[data-versao=assinatura][data-skin=ambar] .tag i,
html[data-versao=assinatura][data-skin=ambar] .nav button i,
html[data-versao=assinatura][data-skin=ambar] .tile .k i,
html[data-versao=assinatura][data-skin=ambar] .hud .h i,
html[data-versao=assinatura][data-skin=ambar] .mh i,
html[data-versao=assinatura][data-skin=ambar] .sk-name i{display:none}

/* matrix assinatura: sem kanjis — binários no lugar, tudo em ASCII */
html[data-versao=assinatura][data-skin=matrix] .docbody::after,
html[data-versao=assinatura][data-skin=matrix] .tagrow .kanji,
html[data-versao=assinatura][data-skin=matrix] .kanji-box,
html[data-versao=assinatura][data-skin=matrix] .rail.r,
html[data-versao=assinatura][data-skin=matrix] .strip .jp,
html[data-versao=assinatura][data-skin=matrix] .tag i,
html[data-versao=assinatura][data-skin=matrix] .nav button i,
html[data-versao=assinatura][data-skin=matrix] .tile .k i,
html[data-versao=assinatura][data-skin=matrix] .hud .h i,
html[data-versao=assinatura][data-skin=matrix] .mh i{display:none}
/* amarelo: radar só onde o texto é pouco; no PC baixo some para não competir com o conteúdo */
@media (max-height:800px){.sg-radar{display:none}}

/* no celular a decoração pesada some de vez (vem depois das regras de cada skin) */
@media (max-width:900px){.sg-plate,.sg-radar,.sg-hanko,.sg-bars,.sg-databars,.sg-errtxt,.sg-warn,.sg-pcb,.sg-glitchbar,.sg-rings,.sg-sun{display:none!important}}

/* ======================================================================
   LOGO ESTILO CYBERPUNK: fonte True Lies, miolo quase branco, halo colorido,
   aberração arrastando para baixo e à direita, e entrada em "boot" (flash + fatias)
   ====================================================================== */
html[data-versao=assinatura]{--ab-shadow:1px 1px 0 rgba(255,64,80,.92),3px 2px 0 rgba(70,255,130,.72),5px 4px 0 rgba(0,229,255,.55);--logo-core:#fff}
html[data-versao=assinatura] [data-skin=ambar]{--logo-core:#fff3d2}
html[data-versao=assinatura] [data-skin=ciano]{--logo-core:#e8fdff}
html[data-versao=assinatura] .wm{font-size:54px;letter-spacing:.04em}
html[data-versao=assinatura][data-skin] .wm .a{font-family:var(--logo-font,'Valorax','Chakra Petch',sans-serif);color:var(--logo-core);-webkit-mask-image:none;mask-image:none;
  text-shadow:var(--ab-shadow),0 0 3px #fff,0 0 12px var(--red),0 0 28px rgba(var(--rgb),.75),0 0 58px rgba(var(--rgb),.45)}
html[data-versao=assinatura][data-skin=matrix] .wm .a{text-shadow:0 0 3px #fff,0 0 12px var(--red),0 0 28px rgba(var(--rgb),.75)}
html[data-versao=assinatura][data-skin=matrix] .wm{font-size:48px;letter-spacing:.1em}
html[data-versao=assinatura] .logo-prev .wm{font-size:72px}
@media (max-width:900px){html[data-versao=assinatura] .wm{font-size:44px}}
@media (max-width:420px){html[data-versao=assinatura] .wm{font-size:40px}}
@keyframes logo-boot{
  0%{opacity:0;filter:blur(7px) brightness(3)}
  10%{opacity:1;filter:blur(3px) brightness(2.6);clip-path:inset(42% 0 38% 0);transform:translateX(-8px)}
  22%{clip-path:inset(0 0 0 0);transform:translateX(6px);filter:brightness(2.2)}
  30%{opacity:.15}
  38%{opacity:1;clip-path:inset(0 0 55% 0);transform:translateX(-4px)}
  48%{clip-path:inset(30% 0 0 0);transform:translateX(5px);filter:brightness(1.8)}
  62%{clip-path:inset(0 0 0 0);transform:none;filter:brightness(1.4)}
  100%{filter:none;transform:none}}
html[data-versao=assinatura] .wm .a.logo-boot{animation:logo-boot 1.2s steps(1,end) 1!important}
@media (prefers-reduced-motion:reduce){html[data-versao=assinatura] .wm .a.logo-boot{animation:none!important}}

/* ======================================================================
   LOGO VETORIAL (letras próprias, estilo Cyberpunk): camadas de cor + brilho
   ====================================================================== */
/* logo vetorial desativada (ficou feia): a Assinatura usa texto com as fontes novas */
html[data-versao=assinatura] .wm .lg{display:none!important}
html[data-versao=assinatura] .wm .a{display:inline-block!important}

html[data-versao=assinatura] .wm .lg{height:60px;width:auto;display:block;overflow:visible;
  filter:drop-shadow(0 0 3px var(--red)) drop-shadow(0 0 12px var(--red)) drop-shadow(0 0 28px rgba(var(--rgb),.55))}
html[data-versao=assinatura] .logo-prev .wm .lg{height:96px}
html[data-versao=assinatura] .lg use{fill:var(--logo-core,#fff)}
html[data-versao=assinatura] .lg .lg-g{fill:#46ff82;transform:translate(7px,5px);opacity:.75}
html[data-versao=assinatura] .lg .lg-c{fill:#19f0ff;transform:translate(4px,3px);opacity:.9}
html[data-versao=assinatura] .lg .lg-r{fill:#ff3a50;transform:translate(-2px,-1px);opacity:.95}
html[data-versao=assinatura] .lg .lg-e1,html[data-versao=assinatura] .lg .lg-e2,html[data-versao=assinatura] .lg .lg-e3{display:none}
@media (max-width:900px){html[data-versao=assinatura] .wm .lg{height:46px}}
@media (max-width:420px){html[data-versao=assinatura] .wm .lg{height:40px}}

/* ---- efeitos da logo vetorial, um por skin ---- */
html[data-versao=assinatura] .lg use{transform-box:fill-box}
@keyframes lv-m{0%,90%,100%{transform:none;clip-path:none}91%{transform:translate(-6px,0);clip-path:inset(8% 0 58% 0)}93%{transform:translate(6px,0);clip-path:inset(56% 0 8% 0)}95%{transform:translate(-3px,0);clip-path:inset(30% 0 36% 0)}97%{transform:none;clip-path:none}}
@keyframes lv-r{0%,90%,100%{transform:translate(-2px,-1px);clip-path:none}91%{transform:translate(-14px,0);clip-path:inset(8% 0 58% 0)}93%{transform:translate(10px,2px);clip-path:inset(56% 0 8% 0)}95%{transform:translate(-9px,-1px);clip-path:inset(30% 0 36% 0)}}
@keyframes lv-c{0%,90%,100%{transform:translate(4px,3px);clip-path:none}91%{transform:translate(14px,2px);clip-path:inset(8% 0 58% 0)}93%{transform:translate(-8px,3px);clip-path:inset(56% 0 8% 0)}95%{transform:translate(10px,4px);clip-path:inset(30% 0 36% 0)}}
html[data-versao=assinatura] .lg .lg-m{animation:lv-m 7s steps(1) infinite}
html[data-versao=assinatura] .lg .lg-r{animation:lv-r 7s steps(1) infinite}
html[data-versao=assinatura] .lg .lg-c{animation:lv-c 7s steps(1) infinite}
/* vermelha: fatias mais fortes e frequentes */
html[data-versao=assinatura] [data-skin=vermelha] .lg .lg-m{animation-duration:4.5s}[data-skin=vermelha] .lg .lg-r{animation-duration:4.5s}[data-skin=vermelha] .lg .lg-c{animation-duration:4.5s}
/* magenta: neon que falha + rastro Sandevistan de ecos à esquerda */
@keyframes lv-neon{0%,17%,22%,58%,63%,100%{opacity:1}18%,21%{opacity:.35}59%,62%{opacity:.55}}
html[data-versao=assinatura] [data-skin=magenta] .lg .lg-m{animation:lv-neon 6s steps(1) infinite}
html[data-versao=assinatura] [data-skin=magenta] .lg .lg-e1,html[data-versao=assinatura] [data-skin=magenta] .lg .lg-e2,html[data-versao=assinatura] [data-skin=magenta] .lg .lg-e3{display:inline}
html[data-versao=assinatura] [data-skin=magenta] .lg .lg-e1{fill:#00e5ff;transform:translate(-10px,0);opacity:.55}
html[data-versao=assinatura] [data-skin=magenta] .lg .lg-e2{fill:#5a8cff;transform:translate(-20px,0);opacity:.36}
html[data-versao=assinatura] [data-skin=magenta] .lg .lg-e3{fill:#8e72ff;transform:translate(-30px,0);opacity:.2}
/* ciano: cores sempre separadas + tremor */
@keyframes lv-jit{0%,70%,100%{transform:none}72%{transform:translate(1px,-1px)}74%{transform:translate(-2px,1px)}76%{transform:translate(2px,0)}78%{transform:none}}
html[data-versao=assinatura] [data-skin=ciano] .lg .lg-m{animation:lv-jit 3s steps(1) infinite}
html[data-versao=assinatura] [data-skin=ciano] .lg .lg-r{transform:translate(-4px,-2px)}[data-skin=ciano] .lg .lg-c{transform:translate(6px,4px)}[data-skin=ciano] .lg .lg-g{transform:translate(10px,7px)}
/* amarelo: rasgo de monitor + linhas de varredura */
@keyframes lv-tear{0%,80%,100%{transform:none;filter:none}81%{transform:translateX(-10px) skewX(-14deg);filter:brightness(1.5)}83%{transform:translateX(7px) skewX(8deg)}85%{transform:translateX(-3px)}87%{transform:none;filter:none}}
html[data-versao=assinatura] [data-skin=ambar] .lg .lg-m{animation:lv-tear 6s steps(1) infinite}
html[data-versao=assinatura] [data-skin=ambar] .wm .lg{-webkit-mask-image:repeating-linear-gradient(0deg,#000 0 3px,rgba(0,0,0,.6) 3px 4px);mask-image:repeating-linear-gradient(0deg,#000 0 3px,rgba(0,0,0,.6) 3px 4px)}
html[data-versao=assinatura][data-fx-glitch=off] .lg use{animation:none!important}
@media (prefers-reduced-motion:reduce){html[data-versao=assinatura] .lg use{animation:none!important}}
html[data-versao=assinatura] .wm .lg.logo-boot{animation:logo-boot 1.2s steps(1,end) 1!important}

/* ======================= TUBO DE TV: moldura, reflexo e distorção ======================= */
html:not([data-versao=assinatura]) #tubo-moldura,html:not([data-versao=assinatura]) #ripple,html:not([data-versao=assinatura]) .wm .lg{display:none!important}
#tubo-moldura{position:fixed;inset:0;width:100%;height:100%;z-index:9995;pointer-events:none}
html[data-versao=assinatura][data-fx-warp=on] .page{filter:url(#tubo-warp)}
/* o arredondamento agora vem da moldura SVG; o overlay de linhas fica retangular */
html[data-versao=assinatura] body::after{border-radius:0!important;box-shadow:none!important}
html[data-versao=assinatura][data-fx-crt=off] #tubo-moldura{display:none}

/* linhas da tela de tubo: modulação suave (linha clara de fósforo + escurecimento gradual), sem faixas pretas duras */
html[data-versao=assinatura] body::after{background:
  repeating-linear-gradient(0deg,rgba(var(--rgb),calc(var(--crt-lines,.22) * .2)) 0 1px,transparent 1px var(--crt-gap,3px)),
  repeating-linear-gradient(0deg,transparent 0,rgba(0,0,0,calc(var(--crt-lines,.22) * .5)) calc(var(--crt-gap,3px) * .5),transparent var(--crt-gap,3px)),
  radial-gradient(ellipse at center,transparent 66%,rgba(0,0,0,.26))}
/* o canto arredondado da moldura não pode engolir botões: com a tela antiga ligada, a página ganha folga nas pontas */
html[data-versao=assinatura]:not([data-fx-crt=off]) .page{padding-top:max(30px,calc(var(--crt-moldura,10px) + 24px));padding-left:max(44px,calc(var(--crt-moldura,10px) + 34px));padding-right:max(44px,calc(var(--crt-moldura,10px) + 34px))}

/* ===== pós-crítico: desempenho do fisheye, placa do amarelo, celular ===== */
/* com a distorção ligada, animações contínuas dentro da página são pausadas (cada quadro repintaria a página toda pelo filtro) */
html[data-versao=assinatura][data-fx-warp=on] .vc,html[data-versao=assinatura][data-fx-warp=on] .strip .bar,html[data-versao=assinatura][data-fx-warp=on] .rail,html[data-versao=assinatura][data-fx-warp=on] .hudchip::before,html[data-versao=assinatura][data-fx-warp=on] .status-dot{animation:none!important}
html[data-versao=assinatura] .sg-plate{left:340px}
html[data-versao=assinatura] .strip>span:first-child{opacity:.85}
@media (max-width:900px){
  html[data-versao=assinatura] .lg use{animation:none!important}
  html[data-versao=assinatura][data-skin=ambar] .wm .lg{-webkit-mask-image:none;mask-image:none}
}

/* ===================== MATRIX ASSINATURA, refinado pelo monitor de fósforo de referência ===================== */
/* fundo preto total, soturno */
html[data-versao=assinatura][data-skin=matrix]{--bg:#000;--bg-rgb:0,0,0;--panel:#010602;--panel-rgb:1,6,2;--mono:'VT323','Share Tech Mono',monospace}
html[data-versao=assinatura][data-skin=matrix] #sigcanvas{opacity:.42}
/* texto e rótulos na fonte de terminal; VT323 é pequena, então sobe o tamanho */
html[data-versao=assinatura][data-skin=matrix] .meta,html[data-versao=assinatura][data-skin=matrix] .hint,html[data-versao=assinatura][data-skin=matrix] .legend,
html[data-versao=assinatura][data-skin=matrix] .tile .k,html[data-versao=assinatura][data-skin=matrix] .sys,html[data-versao=assinatura][data-skin=matrix] .seg small,
html[data-versao=assinatura][data-skin=matrix] .para .time,html[data-versao=assinatura][data-skin=matrix] .tag,html[data-versao=assinatura][data-skin=matrix] .hud .h,
html[data-versao=assinatura][data-skin=matrix] .strip,html[data-versao=assinatura][data-skin=matrix] .dock-row .note{font-family:'VT323','Share Tech Mono',monospace;font-size:17px;letter-spacing:.02em}
html[data-versao=assinatura][data-skin=matrix] .para p,html[data-versao=assinatura][data-skin=matrix] .vazio{font-size:22px;line-height:1.5}
/* brilho de fósforo (bloom): halo no texto, sem desfocar a letra */
html[data-versao=assinatura][data-skin=matrix] body{text-shadow:0 0 2px rgba(var(--rgb),.85),0 0 9px rgba(var(--rgb),.45)}
html[data-versao=assinatura][data-skin=matrix] .para p{text-shadow:0 0 1.5px rgba(var(--rgb),.9),0 0 8px rgba(var(--rgb),.4)}
/* molduras de linha dupla, como os quadros do monitor */
html[data-versao=assinatura][data-skin=matrix] .panel>.inner{position:relative}
html[data-versao=assinatura][data-skin=matrix] .panel>.inner::after{content:"";position:absolute;inset:5px;border:1px solid rgba(var(--rgb),.55);pointer-events:none;z-index:2;box-shadow:0 0 8px rgba(var(--rgb),.3),inset 0 0 8px rgba(var(--rgb),.12)}
html[data-versao=assinatura][data-skin=matrix] .panel::before{filter:drop-shadow(0 0 3px var(--red))}
/* digitação de terminal: sem inclinação nem eco colorido, só o clarão do fósforo */
html[data-versao=assinatura][data-skin=matrix] .para .sande{animation:none;transform:none;color:#eaffee;text-shadow:0 0 6px var(--red),0 0 16px rgba(var(--rgb),.6)}
html[data-versao=assinatura][data-skin=matrix] .para .sande-ok{animation:sg-flash-fosforo .45s ease-out}
@keyframes sg-flash-fosforo{from{color:#fff;text-shadow:0 0 10px var(--red),0 0 22px rgba(var(--rgb),.8)}to{text-shadow:0 0 1.5px rgba(var(--rgb),.9),0 0 8px rgba(var(--rgb),.4)}}
/* manchas de reflexo no vidro (como no vídeo), bem fracas */
.sg-crt-glare{background:
  radial-gradient(ellipse 9% 16% at 41% 52%,rgba(200,215,205,.05),transparent 70%),
  radial-gradient(ellipse 9% 16% at 58% 54%,rgba(200,215,205,.045),transparent 70%),
  radial-gradient(ellipse 42% 26% at 26% 15%,rgba(215,255,228,.07),transparent 72%),
  radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.6))}
/* tela de boot: texto grande de terminal com halo e desfoque mínimo */
.sg-boot{filter:blur(.35px);font-size:30px;line-height:1.35;transition:opacity .5s,filter .5s,transform .5s}
.sg-boot.sai{opacity:0;filter:blur(3px) brightness(2.2);transform:scaleY(.02)}

/* decoração fixa em px do amarelo só onde cabe ao lado do cabeçalho */
@media (max-width:1279px){.sg-plate,.sg-databars{display:none}}
/* controles que só existem na Assinatura ficam escondidos na Base */
html:not([data-versao=assinatura]) label:has([data-fx=mouse]),html:not([data-versao=assinatura]) label:has([data-fx=warpOn]),html:not([data-versao=assinatura]) label:has([data-crt=moldura]),html:not([data-versao=assinatura]) label:has([data-crt=warp]){display:none}

/* ===== linhas vetoriais por cima do fisheye (linhas.js): a borda de CSS some onde o traço SVG a substitui ===== */
#linhas-vet{position:fixed;inset:0;width:100%;height:100%;z-index:9994;pointer-events:none;display:none}
html[data-linhas=on] #linhas-vet{display:block}
html[data-linhas=on] [data-vec=p]::before,html[data-linhas=on] [data-vec=p]::after{display:none}
html[data-linhas=on] [data-vec=c]{background:transparent!important}
html[data-linhas=on] [data-vec=b]{border-color:transparent!important}
/* magenta: neon legível (miolo branco, halo menor) com as fontes novas */
@keyframes sg-neon{0%,18%,22%,60%,64%,100%{color:#fff;text-shadow:0 0 3px #fff,0 0 10px var(--red),0 0 24px rgba(var(--mg-rgb),.7)}19%,21%{color:rgba(var(--rgb),.25);text-shadow:none}61%,63%{color:rgba(var(--rgb),.4);text-shadow:0 0 4px rgba(var(--rgb),.4)}}
html[data-versao=assinatura][data-skin=magenta] .wm .a{animation:sg-neon 6s infinite steps(1)}