/* sykii.gg/extension (28.9) · vincular la extensión de Twitch.
   Mismo lenguaje que las páginas 27.1: cabecera común, sin cajas, filetes arriba. */
.grid-tex,.ambient{position:fixed;inset:0;pointer-events:none}
.ext-page{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 max(32px,env(safe-area-inset-right,0px)) 80px max(32px,env(safe-area-inset-left,0px))}
.ext-hero .pg-lead{max-width:56ch;color:#B9B2A4}

.ext-link{margin:8px 0 48px;padding:28px 0;border-top:1px solid rgba(232,192,106,.35)}
.ext-step h2{margin:0 0 10px;font:900 clamp(26px,3.2vw,36px)/1.1 var(--font-display);color:#F4EAD6}
.ext-step p{max-width:62ch;margin:0 0 16px;color:var(--text-dim);font:500 17px/1.5 var(--font-body)}
.ext-step a{color:var(--gold-light)}
.ext-install{margin:0;padding-left:22px;display:grid;gap:10px;color:var(--text);font:500 17px/1.5 var(--font-body)}
.ext-install code{padding:1px 6px;background:rgba(255,255,255,.06);color:var(--gold-light);font-size:15px}
.ext-store{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 18px!important}
.ext-store small{color:var(--muted);font:500 14px var(--font-body)}
.ext-manual summary{cursor:pointer;color:var(--text-dim);font:700 15px var(--font-body);margin-bottom:12px}
.ext-manual summary:focus-visible{outline:2px solid var(--electric);outline-offset:2px}
.ext-who{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.ext-who img{width:48px;height:48px;border-radius:50%;border:1px solid var(--border);object-fit:cover}
.ext-who strong{display:block;color:var(--text);font:700 18px var(--font-body)}
.ext-who small{color:var(--muted);font:600 14px var(--font-body)}

.ext-btn{display:inline-block;min-height:48px;padding:12px 26px;border:0;cursor:pointer;text-decoration:none;
  background:linear-gradient(180deg,#FFF1C1,var(--gold-light) 40%,var(--gold));color:#170f02;font:400 24px/1 var(--font-accent);letter-spacing:.06em;transition:filter .2s,transform .12s}
.ext-btn:hover:not(:disabled){filter:brightness(1.08)}
.ext-btn:active:not(:disabled){transform:scale(.97)}
.ext-btn:disabled{filter:grayscale(.6) brightness(.7);cursor:default}
.ext-btn:focus-visible{outline:2px solid var(--electric);outline-offset:3px}
.ext-btn.is-ghost{background:none;border:1px solid rgba(239,118,129,.5);color:#ef7681;font-size:20px}
.ext-msg{min-height:24px;margin-top:12px!important;color:var(--text-dim)}
.ext-msg.is-bad{color:#ef7681}

.ext-info{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin-bottom:40px}
.ext-info article{padding:18px 0;border-top:1px solid rgba(255,255,255,.08)}
.ext-info span{display:block;margin-bottom:8px;color:var(--muted);font:700 12px var(--font-body);letter-spacing:.18em}
.ext-info ul{margin:0;padding-left:18px;display:grid;gap:8px;color:var(--text-dim);font:500 16px/1.5 var(--font-body)}
.ext-info b{color:var(--text)}
.ext-info a{color:var(--gold-light)}

.ext-changes{margin-bottom:32px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08)}
.ext-changes h2{margin:0 0 10px;font:700 20px var(--font-body);color:var(--text)}
.ext-changes span{color:var(--electric);font:700 13px var(--font-body);letter-spacing:.14em}
.ext-changes ul{margin:6px 0 0;padding-left:18px;display:grid;gap:6px;color:var(--text-dim);font:500 15px/1.5 var(--font-body)}

.ext-revoke{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0;border-top:1px solid rgba(239,118,129,.25)}
.ext-revoke h2{margin:0 0 4px;font:700 20px var(--font-body);color:var(--text)}
.ext-revoke p{margin:0;color:var(--text-dim);font:500 15px/1.5 var(--font-body)}

@media(max-width:700px){
  .ext-page{padding-left:16px;padding-right:16px}
  .ext-info{grid-template-columns:1fr}
  .ext-revoke{flex-direction:column;align-items:flex-start}
}