.addon-card{padding:32px}
.addon-head{display:flex;gap:24px;justify-content:space-between;align-items:flex-start;margin-bottom:24px}
.addon-head h2{font-size:28px;margin:6px 0 10px}
.addon-head p{color:var(--text-muted,#aab);line-height:1.6;max-width:760px}
.addon-type{display:inline-block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;padding:4px 10px;border-radius:20px;background:rgba(124,77,255,.18);color:var(--primary)}
.addon-dl{white-space:nowrap;flex-shrink:0}
.addon-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-bottom:28px}
.addon-gallery figure{margin:0}
.addon-gallery img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;border:1px solid rgba(255,255,255,.08);transition:transform .2s,border-color .2s;display:block}
.addon-gallery a:hover img{transform:scale(1.03);border-color:var(--primary)}
.addon-gallery figcaption{font-size:13px;color:var(--text-muted,#aab);margin-top:6px}
.addon-cols{display:grid;grid-template-columns:1fr 1.3fr;gap:32px}
.addon-card h3{font-size:16px;margin:24px 0 12px;color:var(--primary);text-transform:uppercase;letter-spacing:.05em}
.addon-cols h3{margin-top:0}
.addon-features{list-style:none;padding:0;margin:0}
.addon-features li{padding:7px 0 7px 26px;position:relative;line-height:1.5}
.addon-features li::before{content:'✔';position:absolute;left:0;color:var(--primary)}
.addon-steps{counter-reset:s;list-style:none;padding:0;margin:0}
.addon-steps li{counter-increment:s;position:relative;padding:4px 0 14px 44px;line-height:1.6}
.addon-steps li::before{content:counter(s);position:absolute;left:0;top:2px;width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.addon-steps code{word-break:break-all}
.addon-video{position:relative;aspect-ratio:16/9;max-width:820px;border-radius:12px;overflow:hidden}
.addon-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.addon-keys{margin-bottom:8px}
.addon-keys kbd{display:inline-block;padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-bottom-width:3px;font-family:inherit;font-size:13px}
.addon-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(5,5,12,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.addon-lightbox[hidden]{display:none}
.addon-lightbox img{max-width:100%;max-height:85vh;border-radius:8px}
.addon-lightbox p{color:#ddd;margin-top:12px}
.addon-lightbox button{position:absolute;top:16px;right:20px;background:none;border:0;color:#fff;font-size:28px;cursor:pointer}
@media (max-width:800px){.addon-card{padding:20px}.addon-head{flex-direction:column}.addon-cols{grid-template-columns:1fr;gap:8px}.addon-head h2{font-size:22px}}
/* luz que percorre a borda das abas, uma por vez */
@property --spark{syntax:'<angle>';inherits:false;initial-value:0deg}
#addon-tabs a{position:relative;isolation:isolate}
#addon-tabs a::after{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;
  background:conic-gradient(from var(--spark),transparent 0deg,transparent 280deg,rgba(124,77,255,.45) 325deg,#c9b8ff 352deg,#fff 358deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  filter:drop-shadow(0 0 3px #a78bfa)}
#addon-tabs a.spark::after{animation:sparkRun 1.4s linear forwards}
@keyframes sparkRun{0%{--spark:0deg;opacity:0}10%{opacity:1}90%{opacity:1}100%{--spark:360deg;opacity:0}}
@media (prefers-reduced-motion:reduce){#addon-tabs a.spark::after{animation:none}}